【前端】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后，元素经过指定宽度，并将两边的空外边距平均分配

注：若是没有设置 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 布局教程：语法篇

参考

www.runoob.com/css/css-ali…

相关阅读

CSS : 入门

CSS : display

CSS : position

CSS : float

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