水平居中和垂直居中常用方法总结

水平居中

行级元素：为该行级元素的父元素设置text-align:center样式
<div style="width: 500px;height: 100px;border: 1px solid
green;text-align:center;"> <span>行级元素</span> </div>
块级元素：为其自身设置margin:auto样式
<div style="width: 500px;height: 100px;border: 1px solid red;"> <div
style="margin:auto;width: 100px;height: 100px;border: 1px solid
gold">块级元素</div> </div>


垂直居中

1.display:table;此元素会作为块级表格来显示（类似 <table>），表格前后带有换行符.

display:table-cell;此元素会作为一个表格单元格显示（类似 <td> 和 <th>）
<div style="display: table;width: 500px;height: 200px;border: 1px solid red;">
<div style="display: table-cell;vertical-align:
middle;text-align:center;">块级元素</div> </div>


 

2. 利用flex布局使内部块级元素水平，垂直居中

display:flex;justify-content: center; align-items:center;
<div style="display:flex;justify-content: center; align-items:center; width:
500px;height: 200px;border: 1px solid green;text-align:center;line-height:100px
"> <div style="width: 100px;height: 100px;border: 1px solid gold">块级元素</div>
</div>


3.利用定位实现

父元素：position:relative;

子元素：position: absolute;top:50%;left:50%;transform:translate(-50%,-50%);
<div style="position:relative; width: 500px;height: 200px;border: 1px solid
red;"> <div style="position:
absolute;top:50%;left:50%;transform:translate(-50%,-50%);width: 100px;height:
100px;border: 1px solid gold;text-align:center;line-height:100px">块级元素</div>
</div>
 



 

• « 上一篇：【VMware】VMware 15 虚拟机安装 win7
• » 下一篇：弹指间，网页灰飞烟灭——Google灭霸彩蛋实现