div如何居中

littleaway 2021-12-15 原文

div内容如何居中，div整体如何居中

　　整理一点关于div居中的方法。哪里有不妥欢迎大家拍砖~

div里的内容如何居中：

　　水平居中（非块级元素）： text-align:center;

　　垂直居中：

vertical-align:middle;
内容是文字的话，可以将height和line-height设置成一样的值；

　　简单方法（但不是全部兼容）：

1 display: -webkit-flex;
2 display: flex;
3 -webkit-align-items: center;
4 align-items: center;
5 -webkit-justify-content: center;
6 justify-content: center;

整个div如何居中：

　　定宽div水平居中： margin: 0 auto; 0表示上下边距是0，auto表示margin-left和margiin-top为auto;

　　不定宽div水平居中：

第一步：为需要设置的居中的元素外面加入一个 table 标签 ( 包括 <tbody>、<tr>、<td> )。第二步：为这个 table 设置“左右 margin 居中”（这个和定宽块状元素的方法一样）。
display:inline; text-align:center;
通过给父元素设置 float，然后给父元素设置 position:relative; left:50%; ，子元素设置 position:relative; left:-50%;

div水平居中：父div设置 width:100%;