|
在编写HTML页面时，咱们会对文本、照片等等必须居中表示的时候，通常都是单独运用水平居中或垂直居中，可是今天给大众讲讲 css教程
中的水平垂直同期居中的办法，一共有5种思路，此刻分享给大众：
水平居中和垂直居中已然单独介绍过，本文将介绍水平垂直同期居中的5种思路
思路一:text-align + line-height实现单行文本水平垂直居中
<style>
.test{
text-align: center;
line-height: 100px;}</style>
<div class="test" style="bac公斤round-color: lightblue;width: 200px;">测试文字</div>
思路二: text-align + vertical-align
【1】在父元素设置text-align和vertical-align，并将父元素设置为table-cell元素，子元素设置为inline-block元素
[重视]若兼容IE7-浏览器，将结构改为<table>结构来实现table-cell的效果；用display:inline;zoom:1;来实现inline-block的效果
<style>
.parent{
display: table-cell;
text-align: center;
vertical-align: middle;}
.child{
display: inline-block;}</style>
<div class="parent" style="bac公斤round-color: gray; width:200px; height:100px;">
<div class="child" style="bac公斤round-color: lightblue;">测试文字</div></div>
【2】若子元素是图像，可不运用table-cell，而是其父元素用行高替代高度，且字体体积设为0。子元素本身设置vertical-align:middle
<style>
.parent{
text-align: center;
line-height: 100px;
font-size: 0;}
.child{
vertical-align: middle;}</style>
<div class="parent" style="bac公斤round-color: gray; width:200px; ">
<img class="child" src=" http://www.maiziedu.com/uploads/rs/26/ddzmgynp/img1.gif
" width="50%" alt="test"></div>
思路三: margin + vertical-align
想要在父元素中设置vertical-align，须设置为table-cell元素；想要让margin:0 auto实现水平居中的块元素内容撑开宽度，须设置为table元素。而table元素是能够嵌套在tabel-cell元素里面的，就像一个单元格里能够嵌套一个表格
[重视]若兼容IE7-浏览器，需将结构改为<table>结构
<style>
.parent{
display:table-cell;
vertical-align: middle;}
.child{
display: table;
margin: 0 auto;}</style>
<div class="parent" style="bac公斤round-color: lightgray; width:200px; height:100px; ">
<div class="child" style="bac公斤round-color: lightblue;">测试文字</div></div>
思路四: 运用absolute
【1】利用绝对定位元素的盒模型特性，在偏移属性为确定值的基本上，设置margin:auto
<styl
| 
发表于 2024-6-30 05:46:15