【前端】CSS : 对齐、居中

介绍

文本、元素的对齐和居中在开发中经常会用到。本文分别对文本、元素的对齐、居中进行介绍

文本

文本水平居中

{ text-align:center }

文本垂直居中
将line-height设为和height相同的高度(仅单行可用)

{ 
  height:30px;
  line-height:30px;
}

元素

通用样式

.background {
    background-color: #7FD0F3;
    border-radius: 8px;
    height: 100px;
}

.item {
    width: 60%;
    background-color: #F19EC4;
    padding: 10px;
    color: #FFFFFF;
    border-radius: 8px;
}

水平居中

通过margin:auto实现

.horizontal-align-center {
    margin: auto;
}

<div class="background">
    <div class="item horizontal-align-center">PHP才是世界上最好的语言！！！</div>
</div>

效果：

margin: auto;

元素设置margin:auto后，元素通过指定宽度，并将两边的空外边距平均分配

注：如果没有设置 width 属性(或者设置 100%)，居中对齐将不起作用。

水平对齐

水平对齐——position
position更多用法参考：CSS : position

.horizontal-align-right {
    position: absolute;
    right: 10px;
}

<div class="background">
    <div class="item horizontal-align-right">PHP才是世界上最好的语言！！！</div>
</div>

效果：

水平对齐

水平对齐——float
float更多用法参考：CSS : float

.horizontal-align-right2 {
    float: right;
}

<div class="background">
    <div class="item horizontal-align-right2">PHP才是世界上最好的语言！！！</div>
</div>

效果：如上图

垂直居中

.vertical-align-center {
    margin: 0;
    position: absolute;
    top:50%;
    -ms-transform: translate(-0%, -50%);
    transform: translate(-0%, -50%);
}

<div class="background" style="position: relative;" >
    <p class="item vertical-align-center">PHP才是世界上最好的语言！！！</p>
</div>

效果：

垂直居中

水平垂直居中

.align-center {
    margin: 0;
    position: absolute;
    top:50%;
    left: 50%;
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    margin: auto;
}

<div class="background" style="position: relative;" >
    <p class="item align-center">PHP才是世界上最好的语言！！！</p>
</div>

通过flex实现

强大的flex几乎能满足你的所有需求

水平居中

.horizontal-align-center-flex {
    display: flex;
    justify-content: center;
}

<div class="background horizontal-align-center-flex" >
    <p class="item">PHP才是世界上最好的语言！！！</p>
</div>

效果：

水平居中

问题：高度有点怪
原因：p标签自带的margin

垂直居中

.vertical-align-center-flex {
    display: flex;
    align-items: center;
}

<div class="background vertical-align-center-flex" >
    <p class="item">PHP才是世界上最好的语言！！！</p>
</div>

垂直居中

子元素使用align-self: center也能垂直居中

水平垂直居中

.align-center-flex {
    display: flex;
    justify-content: center;
    align-items: center;
}

<div class="background align-center-flex" >
    <p class="item">PHP才是世界上最好的语言！！！</p>
</div>

效果：

水平垂直居中

flex更多用法参考：Flex 布局教程：语法篇

参考

http://www.runoob.com/css/css-align.html

相关阅读
CSS : 入门
CSS : display
CSS : position
CSS : float

有错误之处，感谢指出，接收批评