整理一点关于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%;
时间: 2024-10-09 13:10:04