【前端】CSS : 对齐、居中

2,333 阅读2分钟

介绍

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

文本

文本水平居中

{ 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 布局教程:语法篇

参考

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

相关阅读

CSS : 入门

CSS : display

CSS : position

CSS : float

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