学会CSS之垂直居中的几个方法~~~
写页面的时候常常要用到垂直居中，遇到不同的情况还需要针对性的用上不同的方法来实现，今天，我总结了8种不同的方法哟，快来和我一起看看吧~~
父元素不定高情况下
要点：
1.不要让.parent定高
2.child高度不确定，垂直居中
代码展示：
HTML部分：
<div class="parent">
<div class="child">
有很多文字有很多文字有很多文字有很多文字有很多文字有很多文字有很多文字有很多文字有很多文字有很多文字有很多文字有很多文字有很多文字有很多文字有很多文字有很多文字有很多文字有很多文字有很多文字有很多文字有很多文字有很多文字有很多文
</div>
</div>
CSS部分：
.parent {
border:3px solid blue;
}
.child {
border:3px solid red;
padding:40px
}
父元素定高情况下
HTML自带方法
table方法
要点：直接把div放进<table>下面的<tr><td>之间，就自动实现了垂直居中，在设置好宽度，利用margin：0 auto;便可实现水平居中
代码展示：
HTML部分
| <div class="child"> 有很多文字有很多文字有很多文字有很多文字有很多文字有很多文字有很多文字有很多文字有很多文字有很多文字有很多文字有很多文字有很多文字有很多文字有很多文字有很多文字有很多文字有很多文字有很多文字有很多文字有很多文字有很多文字有很多文 </div> |
CSS部分
table {
border:1px solid #aaa;
height:600px;
width:600px;
}
tr {
border:1px solid #666;
}
td {
border:1px solid #7d7d7d;
}
.child {
border:2px solid red;
width:300px;
margin:0 auto;
}
方法二:伪元素方法
要点：
通过vertical-align:middle让三块分别居中对齐
通过height:100%，span元素和父容器一样高，这样里面三个元素和外面也是居中对齐了
水平居中只要让父容器text-align:center;就可以了
代码展示
HTML部分：
<div class="parent">
<div class="child">
有很多文字有很多文字有很多文字有很多文字有很多文字有很多文字有很多文字有很多文字有很多文字有很多文字有很多文字有很多文字有很多文字有很多文字有很多文字有很多文字有很多文字有很多文字有很多文字有很多文字有很多文字有很多文字有很多文
</div>
</div>
CSS部分：
.parent {
border:3px solid blue;
height:600px;
text-align:center;
}
.child {
border:3px solid #666;
display:inline-block;
width:300px;
vertical-align:middle;
}
.parent:before {
content:'';
display:inline-block;
height:100%;
vertical-align:middle;
outline:3px solid red;//用于对比
}
.parent:after {
content:'';
display:inline-block;
height:100%;
vertical-align:middle;
outline:3px solid red;//用于对比
}
方法三 table变形方法
要点：
把所有的table,tr,td 变成类
display对应元素
在td上加上vertical-align:middle;
代码展示：
HTML部分
<div class="table">
<div class="tr">
<div class="td">
<div class="child">
有很多文字有很多文字有很多文字有很多文字有很多文字有很多文字有很多文字有很多文字有很多文字有很多文字有很多文字有很多文字有很多文字有很多文字有很多文字有很多文字有很多文字有很多文字有很多文字有很多文字有很多文字有很多文字有很多文
</div>
</div>
</div>
</div>
CSS部分
.table {
display:table;
border:3px solid blue;
height:600px;
}
.tr {
display:table-row;
border:3px solid red;
}
.td {
display:table-cell;
border:3px solid yellow;
vertical-align:middle;
}
.child {
border:1px solid gerrn;
}
以上三种方法都是只通过HTML就可以实现居中了，并且是可以兼容所有浏览器的（IE5.5之后）
方法四：绝对定位实现居中
要点：
父容器 position:relative; 子元素：position：absolute;
给子元素设置top:50%;left:50%;
知其宽高，向左向上移动子元素宽高的一半（兼容IE）
代码展示：
HTML部分
<div class="parent">
<div class="child">
有很多文字有很多文字有很多文字有很多文字有很多文字有很多文字有很多文字有很多文字有很多文字有很多文字有很多文字有很多文字有很多文字有很多文字有很多文字有很多文字有很多文字有很多文字有很多文字有很多文字有很多文字有很多文字有很多文
</div>
</div>
CSS部分
.parent {
border:3px solid blue;
height:600px;
position:relative;
}
.child {
border:3px solid green;
position:absolute;
top:50%;
left:50%;
margin-left:-150px;
margin-top:-100px;
}
方法五：CSS3实现居中
要点：
父容器 position:relative; 子元素：position：absolute;
给子元素设置top:50%;left:50%;不用知道宽高，向左向上移动子元素宽高的一半
transform:translate(-50%,-50%);（缺点：不兼容IE）
代码展示：
HTML部分
<div class="parent">
<div class="child">
有很多文字有很多文字有很多文字有很多文字有很多文字有很多文字有很多文字有很多文字有很多文字有很多文字有很多文字有很多文字有很多文字有很多文字有很多文字有很多文字有很多文字有很多文字有很多文字有很多文字有很多文字有很多文字有很多文
</div>
</div>
CSS部分
.parent {
border:3px solid blue;
height:600px;
position:relative;
}
.child {
border:3px solid green;
width:300px;
height:200px;
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
}
方法六：margin:auto垂直居中
要点：子元素设置
margin:auto;
top:0; bottom:0; left:0; right:0;
代码展示：
HTML部分：
<div class="parent">
<div class="child">
有很多文字有很多文字有很多文字有很多文字有很多文字有很多文字有很多文字有很多文字有很多文字有很多文字有很多文字有很多文字有很多文字有很多文字有很多文字有很多文字有很多文字有很多文字有很多文字有很多文字有很多文字有很多文字有很多文
</div>
</div>
CSS部分：
.parent {
height:600px;
border:3px solid blue;
position:relative;
}
.child {
border:3px solid green;
position:absolute;
width:300px;
height:200px;
margin:auto;
top:0;
bottom:0;
left:0;
right:0;
}
#### 方法七：flex布局方法实现居中
要点：设置父容器为
display:flex;
justify-content:center;
align-items:center;多个子元素依然可以居中
代码展示：
HTML部分：
<div class="parent">
<div class="child">
有很多文字有很多文字有很多文字有很多文字有很多文字有很多文字有很多文字有很多文字有很多文字有很多文字有很多文字有很多文字有很多文字有很多文字有很多文字有很多文字有很多文字有很多文字有很多文字有很多文字有很多文字有很多文字有很多文
</div>
</div>CSS部分
.parent {
height:600px;
border:3px solid blue;
display:flex;
justify-content:center;
align-items:center;
}
.child {
border:3px solid red;
width:300px;
}
所有效果展示
父元素不定高方法
table方法
table变形方法
伪元素方法
绝对定位方法
css3 transform方法
margin:auto方法
flex布局方法
1.table结构自带的垂直居中效果
先看效果：table居中效果
2.行内元素居中
看效果：行内元素居中效果