【CSS】元素居中
一、 水平居中1.行内元素水平居中(1)text-align2.块级元素水平居中2.1 margin(1)margin2.2布局(1)flex+ justify-content(推荐)(2) flex+margin(3)grid+ justify-content(4)grid+ margin(5)table+margin2.3 定位(1)absolute+translate+left(2)absolute+margin(3)absolute+负margin+left(定宽)(4)relative + 负margin(定宽)2.4 其他方法(1)转行内元素inline-block+text-align(2)浮动元素:margin(3)浮动元素:relative二、 垂直居中1.行内元素水平居中(1)line-height=height2.块级元素垂直居中2.2布局(1)flex+ align-items(2)flex+ margin(3)grid+ align-content(4)table-cell+vertical-align+inline-block2.3 定位(1)absolute+translate+top(2)absolute+负margin+left(定宽)3.垂直水平居中3.1布局(1)flex+ align-items+justify-content(2)flex+ margin(3)grid+ place-items(4)table-cell+text-align+vertical-align3.1定位(1)absolute+translate+left+top(2)absolute+负margin+left+top(定宽)每每用到居中,总会头疼于css的编写,想着一定要找个时间好好整理一番:
整理的过程中发现很多拼拼凑凑的属性都能实现居中,其实掌握通用的几个就行,一般都比较推荐flex布局,绝对定位在项目中也常有见到,大部分水平和垂直居中分别掌握了,水平垂直居中就是合并在一起,简单的做了个图
(代码部分可以用菜鸟工具在线运行查看:/front-end/61/)
一、 水平居中
1.行内元素水平居中
(1)text-align
(1)块级元素使用text-align: center,使得块级元素文本内容水平居中(2)块级元素使用text-align: center,使得包含在块级元素的行内元素或行内块元素居中对齐(3)块级元素下使用text-align: center,包含在其中的块级元素不能居中对齐
<div class="div1"><p class="p1">块级元素内块级元素文本内容水平居中</p><span class="span1">块级元素内行内元素或行内块元素水平居中</span><p class="p2">块级元素内块级元素本身不能水平居中</p><p class="p2">但块级元素内块级元素继承了文本内容水平居中</p></div>
.div1{width:80%;border:10px solid green;text-align:center;}.p1{background-color:red}.span1{background-color:yellow }.p2{background-color:grey;width:80%}
2.块级元素水平居中
2.1 margin
(1)margin
块级元素上margin:0 auto (必须设置宽度width)
适合单个块级元素
<div class="div1"><p class="p1">块级元素利用margin水平居中</p></div>
.div1{width:90%;border:10px solid red;}.p1{background-color:grey;width:90%;margin:0 auto;}
2.2布局
(1)flex+ justify-content(推荐)
块级元素父元素上:
display:flex
justify-cointent:center
(可实现多个块元素同行居中)
<div class="div2"><p class="p2">块级元素利用flex+justify-content水平居中</p></div>
.div2{width:90%;border:10px solid blue;display:flex;justify-content:center;}.p2{width:90%;background-color:grey;}
(2) flex+margin
父元素: display:flex
子元素: margin:0 auto
(可实现多个块元素在一行中水平居)
<div class="div3"><p class="p3">块级元素利用flex+margin水平居中</p></div>
.div3{width:90%;border:10px solid purple;display:flex;}.p3{width:90%;background-color:grey;margin:0 auto}
felx+margin此方法还可实现多个块元素在一行中水平居中
<div class="div3"><p class="p3">块级元素利用flex+margin水平居中</p><p class="p3">块级元素利用flex+margin水平居中</p><p class="p3">块级元素利用flex+margin水平居中</p></div>
.div3{width:90%;height:20%;border:10px solid purple;display:flex;}.p3{background-color:grey;border:1px solid yellow;margin:0 auto}
(3)grid+ justify-content
(4)grid+ margin
将方法(1)(2)中flex改为grid即可实现
此方法不能多个块元素一行居中
(5)table+margin
将方法(2)中flex改为table即可实现
此方法不能多个块元素一行居中
2.3 定位
(1)absolute+translate+left
父元素相对定位:position:relative;
子元素绝对定位:
position:absolute;
left:50%;
transform:translate(-50%,0);
其中: left:50%子元素以它自己的左边为基准,向右平移了父元素宽度的50%,此时子元素的左边基准在中间位置,整体子元素偏右
transform:translate(-50%,0);(子元素向左平移自己宽度的一半)
transate参考:/weixin_42154189/article/details/109714379
<div class="div6"><p class="p6">块级元素absolute+translate水平居中</p></div>
.div6{width:90%;height:20%;border:10px solid orange;position:relative;}.p6{width:90%;background-color:grey;position:absolute;left:50%;transform:translate(-50%,0);}
(2)absolute+margin
父级元素:position:relative
子元素:
position:absolute;
left:0;
right:0;
margin:0 auto;
<div class="div9"><p class="p9">块级元素absolute+margin水平居中</p></div>
.div9{width:90%;height:20%;border:10px solid pink ;position:relative;}.p9{width:90%;background-color:grey;position:absolute;left:0;right:0;margin:0 auto;}
(3)absolute+负margin+left(定宽)
(类似于absolute+translate,只不过这个要求居中的元素定宽)
父级元素:position:relative
子元素:
position:absolute;
left:50%;
margin-left:-100px;
<div class="div8"><p class="p8">块级元素absolute+负margin水平居中</p></div>
.div8{width:90%;height:20%;border:10px solid Brown ;position:relative;}.p8{width:200px;background-color:grey;position:absolute;left:50%;margin-left:-100px;}
(4)relative + 负margin(定宽)
对于定宽的块级元素:(对于浮动元素也有效)
position:relative
margin-left:-(元素宽一半)px;
<div class="div7"><p class="p7">块级元素relative + 负margin(定宽)水平居中</p></div>
.div7{width:90%;border:10px solid black;}.p7{width:200px;background-color:grey;position:relative;left:50%;margin-left:-100px;}
2.4 其他方法
(1)转行内元素inline-block+text-align
块级元素转为行内元素:
父级元素text-align:center ;
块级元素display:inline-block;
(其中多个块级元素并列,可在并列块级元素中添加display:inline-block;)
<div class="div5"><p class="p5">块级元素转为行内元素水平居中</p></div>
.div5{width:90%;border:10px solid yellow;text-align:center;}.p5{width:90%;background-color:grey;display:inline-block;}
(2)浮动元素:margin
在浮动的元素外套一个div,设置margin: 0 auto
<div class="div10"> <div class="div101"><p class="p10">浮动块级元素水平居中</p></div></div>
.div10{width:90%;height:20%;border:10px solid GreenYellow ;}.div101{width:20%;margin:0 auto;}.p10{background-color:grey;float: left;}
(3)浮动元素:relative
<div class="div11"> <div class="div111"><p class="p11">浮动块级元素水平居中</p></div></div>
.div11{width:90%;height:20%;border:10px solid LightBlue ;}.div111{float: left;position: relative;left: 50%;}.p11{background-color:grey;float: left;position: relative;right: 50%;}
二、 垂直居中
1.行内元素水平居中
(1)line-height=height
父元素的height=子元素line-height
<div class="div1"> <p class="p1">浮动块级元素垂直居中</p></div>
*{margin:0px;padding}.div1{width:90%;height:200px;border:10px solid GreenYellow ;}.p1{background-color:grey;line-height:200px}
2.块级元素垂直居中
2.2布局
(1)flex+ align-items
父元素:display:flex;
align-items:center;
<div class="div2"><p class="p2">块级元素利用flex+align-items垂直居中</p></div>
*{margin:0px;padding}.div2{width:90%;height:20%;border:10px solid blue;display:flex;align-items:center;}.p2{width:90%;background-color:grey;}
(2)flex+ margin
<div class="div3"><p class="p3">块级元素利用flex+margin垂直</div>
*{margin:0px;padding:0px;}.div3{width:90%;height:100px;border:10px solid purple;display:flex;}.p3{width:40%;background-color:grey;margin:auto 0}
(3)grid+ align-content
display:grid;
align-content:center;
<div class="div22"><p class="p22">块级元素利用grid+align-content垂直居中</p></div>
*{margin:0px;padding}.div22{width:90%;height:20%;border:10px solid red;display:grid;align-content:center;}.p22{background-color:grey;}
(4)table-cell+vertical-align+inline-block
<div class="div2"><p class="p2">块级元素利用table-cell;vertical-align垂直居中</p></div>
.div2{width:90%;height:200px;border:10px solid blue;vertical-align:middle;display:table-cell;}.p2{width:90%;background-color:grey;display:inline-block;}
2.3 定位
(1)absolute+translate+top
参照水平方法,把移动从x轴变为y轴即可
父元素相对定位:position:relative;
子元素绝对定位:
position:absolute;
top:50%;
transform:translate(0,-50%);
<div class="div6"><p class="p6">块级元素absolute+translate垂直居中</p></div>
*{margin:0px;padding}.div6{width:90%;height:20%;border:10px solid orange;position:relative;}.p6{width:90%;background-color:grey;position:absolute;top:50%;transform:translate(0,-50%);}
(2)absolute+负margin+left(定宽)
<div class="div8"><p class="p8">块级元素absolute+负margin垂直居中</p></div>
*{margin:0px;padding}.div8{width:90%;height:200px;border:10px solid Brown ;position:relative;}.p8{width:200px;height:100px;background-color:grey;position:absolute;top:50%;margin-top:-50px;}
3.垂直水平居中
3.1布局
(1)flex+ align-items+justify-content
结合水平和垂直方法
<div class="div2"><p class="p2">块级元素利用flex+align-items+justify-content垂直居中</p></div>
*{margin:0px;padding}.div2{width:90%;height:20%;border:10px solid blue;display:flex;align-items:center;justify-content:center;}.p2{width:90%;background-color:grey;}
(2)flex+ margin
结合水平和垂直方法
<div class="div3"><p class="p3">块级元素利用flex+margin垂直居中</p></div>
*{margin:0px;padding:0px;}.div3{width:90%;height:100px;border:10px solid purple;display:flex;}.p3{width:40%;background-color:grey;margin:auto }
(3)grid+ place-items
结合水平和垂直方法
<div class="div22"><p class="p22">块级元素利用grid+place-items垂直居中</p></div>
*{margin:0px;padding}.div22{width:90%;height:20%;border:10px solid red;display:grid;place-items:center;}.p22{background-color:grey;}
(4)table-cell+text-align+vertical-align
父元素:
display:table-cell;
text-align:center;
vertical-align:middle;
子元素:
display:inline-block;
(会被float、absolute属性破坏效果,同时margin没有效果)
<div class="div8"><p class="p8">块级元素table-cell+水平垂直居中</p></div>
*{margin:0px;padding:0px;}.div8{width:80%;height:200px;border:10px solid Brown ;display:table-cell;text-align:center;vertical-align:middle;}.p8{width:80%;background-color:grey;display:inline-block;}
3.1定位
(1)absolute+translate+left+top
结合水平和垂直方法
<div class="div6"><p class="p6">块级元素absolute+translate+left+top水平垂直居中</p></div>
*{margin:0px;padding}.div22{width:90%;height:20%;border:10px solid orange;position:relative;}.p22{width:90%;background-color:grey;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);}
(2)absolute+负margin+left+top(定宽)
结合水平和垂直方法
<div class="div8"><p class="p8">块级元素absolute+负margin水平垂直居中</p></div>
*{margin:0px;padding}.div8{width:90%;height:200px;border:10px solid Brown ;position:relative;}.p8{width:200px;height:100px;background-color:grey;position:absolute;top:50%;left:50%;margin-left:-100px;margin-top:-50px;}