CSS之各种元素的对齐

待更新

1. 块级元素水平居中

(1) 条件

• 必须有宽度
• 左右外边距为auto

(2) 代码

width: npx;  必须有宽度

margin: 0 auto;  左右外边距为auto
或
margin: auto;
或
margin-left: auto;
margin-right: auto;

2. 行内元素、行内块元素水平居中

• 给父元素加：text-align: center;

3. 绝对定位的盒子居中

• 加了绝对定位的盒子不能通过 margin: 0 auto 水平居中，但是可以通过以下计算方法实现水平和垂直居中

left: 50%; 让盒子的左侧移动到父级元素的水平中心位置

margin-left: - W(自身宽度的一半) px; 让盒子向左移动自身宽度的一半

4. 固定定位-固定到版心的右侧(该盒子与版心盒子同级)

第一步：让固定的盒子 left: 50%; 让盒子的左侧移动到版心的一半

第二步：让固定的盒子 margin-left: W(版心宽度)/2 px; 走版心宽度的一半

5. 行内文字垂直居中

• 让盒子行内文字垂直居中，解决思路是将文字的行高设置为盒子的高度

div {
    list-style: none;
    height: 50px;
    line-height: 50px;
}