【前端】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

有錯誤之處，感謝指出，接收批評