css-元素居中

本文重要是汇总了关于水平居中，垂直居中，还有水平垂直居中的各种方法。一、水平居中1.行内元素水平居中使用text-align:center;属性可以实现在行内元素（包括：inline,inline-block、inline-table、inline-flex）在块级父元素水平居中。css样式: <style> .parent{ text-align: center; border: 1px solid rebeccapurple; } .inlineTable{ display: inline-table; } .inlineflex{ display: inline-flex; }</style>html结构：<div class=“parent”> <span>我是inline</span></div><div class=“parent”> <p>我是inline-block</p></div><div class=“parent”> <div class=“inlineTable”>我是inline-table</div></div><div class=“parent”> <div class=“inlineflex”>我是inline-flex</div></div>2.块级元素水平居中块级元素水平居中的方法有很多，下面会一一列举：a.将元素的左右外边距设置为auto。cssy样式：.child{ margin: 0 auto; }b.使用absolute+transdorm 父元素相对定位，子元素绝对定位 left:50%，然后向左移动子元素一般的宽度达到水平居中。 css样式：<style> .child { position:absolute; left:50%; transform:translateX(-50%); } .parent { position:relative; }</style>html结构：<div class=“parent”> <div class=“child”>使用absolute+transdorm</div></div>c.使用flex+justify-content css3的flex布局具有兼容性问题，使用需谨慎。css样式：<style> .parent { display: flex; justify-content:center; }</style>html结构：<div class=“parent”> <div class=“child”>flex+justify-content</div></div>d.使用flex+margin 父元素设为flex布局，在设置子元素居中css样式：<style> .parent { display: flex; } .child { margin:0 auto; }</style>html结构<div class=“parent”> <div class=“child”>flex+margin</div></div>3.多个块级元素水平居中html结构：<div class=“parent”> <div class=“chlid”>多级块元素水平居中</div> <div class=“chlid”>多级块元素水平居中</div> <div class=“chlid”>多级块元素水平居中</div></div>公用样式.parent{ border: 1px solid rosybrown; } .chlid{ width: 50px; background: papayawhip; margin-right: 10px; }css样式1——flex布局<style> .parent{ display: flex; justify-content: center; }</style>css样式2-inline-block + text-align: center<style> .parent{ text-align: center; } .chlid{ display: inline-block; }</style>4.浮动元素水平居中公用html结构：<div class=“parent”> <span class=“child”>需要居中的子元素</span> </div>1.定宽浮动元素，通过relative+margincss样式： <style> .child { float: left; width: 500px; position: relative; left: 50%; margin-left: -250px; text-align: center; }</style>2.不定宽，父子元素设置相对定位css样式：<style> .parent { float: left; position: relative; left: 50%; } .child { float: left; position: relative; right: 50%; }</style>3.利用flex布局（通用不管定宽还是不定宽）<style> .parent { display: flex; justify-content: center; } .chlid { float: left; }</style>5.绝对定位元素水平居中 <div class=“parent”> <div class=“child”>让绝对定位的元素水平居中对齐。</div> </div> .parent{ position:relative; } .child{ position: absolute; /绝对定位/ width: 200px; height:100px; background: yellow; margin: 0 auto; /水平居中/ left: 0; /此处不能省略，且为0/ right: 0;/此处不能省略，且为0/ }二、垂直居中1. 单行内联元素垂直居中<div class=“parent”> <span>单行内联元素垂直居中。</span>。</div><style> .parent { height: 120px; line-height: 120px; }</style>2.多行内联元素垂直居中a.利用flex布局（flex）<div class=“parent”> <p>Dance like nobody is watching, code like everybody is.</p> <p>Dance like nobody is watching, code like everybody is.</p> <p>Dance like nobody is watching, code like everybody is.</p></div><style> .parent { height: 140px; display: flex; flex-direction: column; justify-content: center; } < /style>b.利用表布局（table）<style>.parent { display: table; height: 140px; border: 2px dashed #f69c55;}.child { display: table-cell; vertical-align: middle;}</style>3.块级元素垂直居中公共html结构<div class=“parent”> <div class=“child”>块级元素垂直居中。</div></div>a.使用absolute+负margin(已知高度宽度) .parent { position: relative;}.child { position: absolute; top: 50%; height: 100px; margin-top: -50px;}b.使用absolute+transform.parent { position: relative;}.child { position: absolute; top: 50%; transform: translateY(-50%);}c.使用flex+align-items.parent { display:flex; align-items:center;}d.使用table-cell+vertical-align .parent { display: table-cell; vertical-align: middle; }三、水平垂直居中公共html结构<div class=“parent”> <div class=“child” style=“width: 100px;height: 100px;background-color: #666”>>块级元素垂直居中。</div></div>方法一：绝对定位与负边距实现（已知高度宽度） .parent { position: relative; } .child { position: absolute; top: 50%; left: 50%; margin: -50px 0 0 -50px; }方法二：绝对定位与margin:auto （已知高度宽度）.parent { position: relative; height:200px;//必须有个高度}.child { position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto;//注意此处的写法}方法三：绝对定位+CSS3(未知元素的高宽).parent { position: relative;} .child { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}方法四：flex布局 .parent { height:200px;//必须有高度 display: flex; justify-content: center; align-items: center; }方法五：flex/grid与margin:auto.parent { height:200px;//必须有高度 display: grid;}.child { margin: auto;}