居中对齐的几种方式
水平居中对齐的几种方式
1.对于最简单的行内元素的居中采用text-align:center;设置即可//1.注意是父元素添加2.子元素会继承父元素的居中方式
父元素添加 text-align: center;子元素中的所有的行内标签都会水平居中,块级标签中的文字也会居中,即是说,父元素拥有text-align: center;子元素中的字体和行内元素都会居中,并且效果延续至子代。
text-align:center;//父元素拥有,子元素水平居中
<div class="ta">
<!-- //块级元素 -->
<p>你好 世界</p>
你好 世界 //
<h1>你好 世界</h1>
<div>你好 世界</div>
<!-- 行内元素 -->
<img src="./搜索.svg" alt="">
</div>
.ta {
width: 400px;
height: 400px;
background-color: rgb(137, 177, 177);
text-align: center;
display: inline-block;
/* overflow: hidden; */
}
.ta p {
font-size: 120%;
}
.ta div {
margin-top: 50px;
width: 200px;
height: 200px;
background-color: antiquewhite;
}
遇到了高度塌陷
2.marin:0 auto;对于已知宽度的元素使用,实现水平居中。
<div class="content content2">
<div class="center2">
划线区域部分采用margin:0 auto;来实现水平居中显示,需提前写好元素的宽度。
</div>
</div>
.content {
height: 100px;
border: 2px solid #fff;
}
.content2 {
background: #645d5a;
text-align: center;
}
.center2 {
height: 50px;
width: 60%;
border: 2px solid rgb(207, 136, 136);
line-height: 50px;
margin: 0 auto;
}
3.table始现水平居中 1. 将外部块格式化为表格单元格就可垂直居中文本。2.元素外部嵌套table始现。
<div class="content content3">
<table><tbody><tr><td>
这是内容区三:用table实现。
</td></tr></tbody></table>
</div>
.content3{
background: #2f5d34;
}
table{
margin: 0 auto;
}
4.块级的元素转换为行内块元素来实现块级元素的水平居中显示。
<div class="content content4">
<div class="center4">
块级元素转换成行内元素并且居中
</div>
</div>
.content4 {
background: #9d43b4;
text-align: center;
}
.center4 {
display: inline;
}
5.利用定位使元素居中,计算方式 父元素的宽度减去子元素的宽度 除以2 得到left或right的值,注意相对定位和绝对定位的应用。
<div class="fu">
<div class="er">
我是中间的
</div>
</div>
<style>
.fu {
position: relative;
width: 500px;
height: 500px;
background-color: aqua;
}
.er {
position: relative;
text-align: center;
line-height: 150px;
width: 150px;
height: 150px;
left: 175px;
top: 175px;
background-color: aliceblue;
}
</style>
垂直居中的几种方式
1.给父元素添加
line-height:(height);//height为父元素的高度
<div>
<p>你好 世界</p>
</div>
div{
width: 200px;
height: 200px;
line-height: 200px;
}
2.文字水平垂直居中 给父类元素加 vertical-align: middle; 但是这个元素有时会失灵 那是因为vertical-align只作用在inline-block或者inline,还有table-cell等元素内。
<div class="three">
你好 世界
</div>
.three {
width: 400px;
height: 200px;
background: #ddd;
display: table-cell;
vertical-align: middle;
}
将外部块格式化为表格单元格 表格单元格的内容可以垂直居中,将外部块格式化为表格单元格就可垂直居中文本。
3.利用flex布局垂直居中
<div class="box">css 垂直居中--文本文字(弹性布局)</div>
.box {
display: flex;
/*实现垂直居中*/
align-items: center;
/*实现水平居中*/
justify-content: center;
text-align: justify;
width: 400px;
height: 200px;
background: rgb(80, 76, 76);
margin: 0 auto;
color: rgb(0, 0, 0);
}
4.利用内边距 //使用不多 用起来比较麻烦
<div class="wai">
<div class="nei">
中间
</div>
</div>
.wai {
width: 500px;
height: 500px;
background-color: aqua;
padding-top: 300px;
padding-left: 300px;
}
.nei {
width: 100px;
height: 100px;
background-color: antiquewhite;
}
5.利用CSS3的定位 position加上transform来实现文字垂直居中 仅作代码展示 //兼容性低
.center {
position: relative;
top:50%;
transform:translateY(-50%);
left:50%;
transform:translateX(-50%);
}
6.相对绝对定位 和上文的水平居中类似不做过对赘述。
7.定位加上margin 元素
<div class="child"></div>
.child {
position: fixed;
width: 200px;
height: 150px;
background: blue;
top: 50%;
left: 50%;
margin-top: -75px;
margin-left: -100px;
}
以上种种只是我总结出的居中方式,当然居中方式还有很多