CSS居中问题

居中分为：水平居中，垂直居中，水平垂直居中。

被居中的对象分为：行内元素、块状元素。

首先我们需要了解行内元素与块状元素的区别。

<!DOCTYPE html>  
<html lang="zh-CN">  
<head>  
<style>  
        div{  
            width: 100px;  
            height: 100px;  
            margin-top: 10px;  
            background: red;  
        }  
        span{  
            width: 100px;  
            height: 100px;  
            margin-top: 10px;  
            background: red;  
        }  
    </style>  
</head>  
<body>  
<!--块状元素-->
<div></div>  

<!--行内元素-->
<span>1111111111</span>  
 
</body>  
</html>

效果如图

我们给行内元素（span）和块状元素（div）定义了相同的样式

可知：

块状元素（div）会自动分行，默认情况下，宽度自动填满父元素宽度
行内元素（span）默认不分行
行内元素（span）宽高不能由css决定，而是由内容决定的
行内元素的margin和padding的垂直方向上不产生边距效果
可以使用display:block;或display:inline;实现块级元素和行内元素的相互转换

常用的块状元素有：<div>,<p>,<h1>~<h6>,<ol>,<ul>,<dl>,<table>,<form>,<address>,<blockquote>

常用的行内元素有：<a>,<span>,<br>,<i>,<em>,<strong>,<label>,<img>,<input>,<q>,<var>,<cite>,<code>

注：行内元素又可以称为内联元素

言归正传，当居中的时候对行内元素和块状元素要分开对待

一、水平居中

1、块状元素（div）

.item {    
  /* 这里可以设置顶端外边距 */   
  margin: 10px auto;
}

2、行内元素（span）

使用div包住需要居中的行内元素<span>

给这个父辈div定义居中样式

（如果用行内元素作为父辈包住行内元素，则需要把这个父辈的行内元素转换为块状元素）

（display:block;）

.parent {
    width:100%;
    text-align:center;
}

需要注意的是如果不定义大小，默认会是以内容为默认宽度，则，定义居中会无效。

尽量写上border 边框进行测试，解决问题。

二、垂直居中

1、块状元素（div）

.item{
    top: 50%;
    margin-top: -50px;  /* margin-top值为自身高度的一半 */
    position: absolute;
    padding:0;
}

使用position设置样式，距离顶部50%，并调整回自身一半的位置即可

2、行内元素（span）

.div {
    background: #222;
    height: 200px;
}

/*将span元素的height和line-height设置的和父元素一样高度即可实现垂直居中 */
span {
    height: 200px;
    line-height:200px; 
}

行内元素中的内容的line-height默认就是内容垂直居中，只要定义了line-height则可以垂直居中了

三、水平垂直居中

结合上面的水平居中和垂直居中，互不影响，一般都能实现需求。

span {
    /*垂直居中*/
    height: 200px;
    line-height:200px;
    /*水平居中*/
    text-align:center;
}

如有建议和疑问可联系
QQ：1017386624
邮箱：[email protected]

一、水平居中

1、块状元素（div）

2、行内元素（span）

二、垂直居中

1、块状元素（div）

2、行内元素（span）

三、水平垂直居中

猜你喜欢