css水平、垂直居中常用的幾種方式
行內元素水平、垂直居中
- 方案一(不設定居中元素寬高)，程式碼如下： 使用display: table;display:table-cell；vertical-align:middle;屬性
<!--html程式碼如下：-->
<div class="panel-body line-align-center-one-content">
<div class="line-align-center-one">
<span class="mark-item">
這裡是測試的內容 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae earum nobis unde vel. Ab accusantium distinctio ex ipsa necessitatibus. Dolorum facere impedit laudantium magni minima molestiae, nam quidem soluta veniam.
</span>
</div>
</div>
複製程式碼 /*css程式碼段*/
.line-align-center-one-content{
display: table;
width: 100%;
}
.line-align-center-one{
height: 400px;
display: table-cell;
vertical-align: middle;
border: 1px solid #e4393c;
text-align: center;
}
.mark-item{
background: #ccc;
color: #fff;
}
複製程式碼這裡主要是使用text-align:center;是元素水平居中
- 方案二：使用絕對定位+位移(不設定居中元素寬高)，程式碼如下：
<!--html程式碼段如下-->
<div class="line-align-center-two">
<span class="mark-two">
這裡是一個行內元素 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam exercitationem pariatur recusandae voluptate. Amet, animi architecto commodi cumque distinctio, dolorum eaque laborum modi molestiae mollitia nesciunt perferendis rem tenetur voluptate!
</span>
</div>
複製程式碼 /*css程式碼段如下*/
.line-align-center-two{
position: relative;
height: 400px;
border: 1px solid #e4393c;
}
.mark-two{
background: #ccc;
color: #fff;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%) ;
}
複製程式碼- 方案三（不設定居中元素寬高）：使用相對定位+位移+text-align: center;程式碼如下：
<-- html程式碼段如下-->
<div class="line-align-center-three">
<span class="mark-three">
這裡是一個行內元素
</span>
</div>
複製程式碼 /*css程式碼段如下*/
.line-align-center-three{
height: 400px;
border: 1px solid #e4393c;
text-align: center;
}
.mark-three{
position: relative;
top: 50%;
transform: translateY(-50%) ;
background: #ccc;
color: #fff;
}
複製程式碼- 方案四（不設定居中元素寬高）：使用flex佈局，程式碼如下：
<!--html程式碼-->
<div class="line-align-center-four">
<span class="mark-four">
這裡是一個行內元素 lorem
</span>
</div>
複製程式碼 .line-align-center-four{
display:flex;/*Flex佈局*/
display: -webkit-flex; /* Safari */
align-items:center;/*指定垂直居中*/
height: 400px;
border: 1px solid #e4393c;
justify-content: center;/*指定水平居中*/
}
.mark-four{
background: #ccc;
color: #fff;
}
複製程式碼-
方案五（不設定居中元素寬高）：使用偽類，程式碼如下：
<!--html程式碼如下--> <div class="line-align-center-five"> <span class="mark-five"> 這裡是一個行內元素 Lorem </span> </div> 複製程式碼/*css程式碼如下*/ .line-align-center-five { height: 400px; border: 1px solid #e4393c; text-align: center;/*水平居中*/ font-size: 0;/*這一個很重要*/ } .line-align-center-five:before { content: ''; display: inline-block; vertical-align: middle; height: 100%; } .mark-five { font-size: 14px; display: inline-block; vertical-align: middle; background: #ccc; color: #fff; line-height: 26px; } 複製程式碼
塊級元素，水平、垂直居中
塊級元素的居中同樣可以使用上述的行內元素的居中方案。
通用方案
- 在已知容器和居中元素的寬高的情況下，可以使用margin來調節元素居中；
<!--html如下-->
<div class="common-item">
<div class="common-one">
這裡是內容區域，寬高100
</div>
</div>
複製程式碼 /*css程式碼如下：*/
.common-item{
height: 400px;
border: 1px solid #e4393c;
}
.common-one{
width: 100px;
height: 100px;
border:1px solid blue;
margin: 150px auto 0;
}
複製程式碼- 在已知居中元素的寬高尺寸的情況下，可以使用絕對定位或相對定位+margin負值來實現
<div class="common-item-two">
<div class="common-two">
這裡是內容區域，寬高100
</div>
</div>
複製程式碼 .common-item-two{
height: 400px;
border: 1px solid #e4393c;
position: relative;
}
.common-two{
width: 100px;
height: 100px;
border:1px solid blue;
position: absolute;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -50px;
}
複製程式碼或
<div class="common-item-two">
<div class="common-two">
這裡是內容區域，寬高100
</div>
</div>
複製程式碼 .common-item-two{
height: 400px;
border: 1px solid #e4393c;
}
.common-two{
width: 100px;
height: 100px;
border:1px solid blue;
position: relative;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -50px;
}
複製程式碼- 通過line-height屬性來設定內容居中這裡就不再做演示了。
歡迎大家多多指教。