不了解前端的UI不是好美工，以下是慕课网HTML+CSS基础教程学习笔记，不废话，Start!
第15章 css样式设置小技巧
15-1 水平居中设置-行内元素
设置水平居中需要分两种情况：行内元素和块状元素。本节先介绍行内元素：
如果被设置元素为文本、图片等行内元素时，水平居中是通过给父元素设置text-align:center来实现的。
html代码：
<body>
<div class="txtCenter">我想要在父容器中水平居中显示。</div>
</body>
css代码：
<style>
.txtCenter{
text-align:center;
}
</style>
15-2 水平居中设置-定宽块状元素
当被设置元素为块状元素时，用text-align:center就不起作用了，这时也分两种情况：定宽块状元素和不定宽块状元素。本节先了解定宽块状元素(块状元素的宽度width为固定值）:
满足定宽和块状两个条件的元素通过设置左右margin为auto来实现居中的：
html代码：
<body>
<div>我是定宽块状元素，我要水平居中显示。
</div>
</body>
css代码：
<style>
div{
border:1px solid red;/*为了显示居中效果明显为div设置了边框*/
width:200px/*定宽*/
margin:20px auto;/*margin-left与margin-right设置为auto*/
}
</style>
也可以写成：
margin-left:auto;
margin-right:auto;
注意，元素的上下margin是可以随意设置的。
水平居中总结-不定宽块状元素方法（一）
不定宽块状元素:块状元素的宽度的
width不固定。
不定宽的块状元素有三种方法居中：
- 加入
table标签； - 设置
display:inline*,显示类型为行内元素，进行不定宽元素属性设置； - 设置
position:relative和left:50%利用相对定位的方式，将元素向左便宜50%，达到居中效果。
table标签是利用其标签的长度自适应的特性——即不定义其长度也不默认父元素body的长度（table其长度根据其内文本长度决定），因此可以看做一个定宽度元素，然后在利用定宽度块状居中的margin的方法，使其水平居中。
举例：
html代码
<div>
<table>
<tbody>
<tr>
<td>
<ul>
<li>我是第一行文本</li>
<li>我是第二行文本</li>
</ul>
</td>
</tr>
</tbody>
</table>
</div>
css代码：
<style>
table{
border:1px solid;
margin:0 auto;
}
补充：不仅仅是套一个<table标签，而是需要完整的
<table>
<tr>
<td>
...
</td>
</tr>
</table>
结构。
本系列学习完结。
网友评论