【前端】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>
复制代码

效果：

作者：Gavin_ZYX
链接：https://juejin.cn/post/6844903776965361677
来源：稀土掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。