15-1 水平居中设置-行内元素
设置水平居中的场景,比如为了美观,文章的标题一般都是水平居中显示的。
分两种情况:行内元素还是块状元素,块状元素里面又分为定宽块状元素,以及不定宽块状元素。
如果被设置元素为文本、图片等行内元素时,水平居中是通过给父元素设置text-align:center 来实现的。(父元素和子元素:如下面的html代码中,div是“我想要在父容器中水平居中显示”这个文本的父元素。反之这个文本是div的子元素 )
html代码:
<body> <div>我想要在父容器中水平居中显示。</div> </body>
css代码:
<style> .txtCenter{ text-align:center; } </style>
15-2 定宽块状元素
当被设置元素为块状元素时用text-align:center 不起作用,这时也分两种情况:定宽块状元素和不定宽块状元素。
定宽块状元素:块状元素的宽度width为固定值。
满足定宽和块状两个条件的元素是可以通过设置“左右margin”值为“auto”来实现居中的。
设置 div 这个块状元素水平居中:
html代码:
<body> <div>我是定宽块状元素,哈哈,我要水平居中显示。</div> </body>
css代码:
<style> div{ border:1px solid red;/*为了显示居中效果明显为 div 设置了边框*/ width:200px;/*定宽*/ margin:20px auto;/* margin-left 与 margin-right 设置为 auto */ } </style>
也可以写成:
margin-left:auto; margin-right:auto;
注意:元素的“上下 margin” 是可以随意设置的。
15-3 面试常考题之已知宽高实现盒子水平垂直居中
已知宽高实现盒子水平垂直居中。通常使用定位完成,例如想要实现以下效果:
如下两个div元素:
<body> <div class="box"> <div class="box1"></div> </div> </body>
要实现子元素相对于父元素垂直水平居中,我们只需要输入以下代码:
<style> .box{ border:1px solid #00ee00; height:300px; position:relatiive;/*父元素相对定位*/ } .box1{ position:asolute;/*子元素绝对定位*/ top:500%;/*top值为50%*/ left:50%/*left值为50%*/ margin:-100% 0 0 -100%;/*margin-top的值为负的高度的一半,margin-left的值为负的宽度的一半*/ width:200px; height:200px; border:1px solid red; } </style>
技术点的解释:
1、利用父元素设置相对定位,子元素设置绝对定位,那么子元素就是相对于父元素定位的特性。
2、子元素设置上和左偏移的值都为50%,是元素的左上角在父元素中心点的位置。效果:
3、然后再用margin给上和左都给负的自身宽高的一半,就能达到垂直水平居中的效果。
15-4面试常考题之宽高不定实现盒子水平垂直居中
未知宽高实现盒子水平垂直居中,通常使用定位以及translate完成。参考下面例子:
<div> <div> 哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈…… </div> </div>
添加样式:
.box { border: 1px solid #00ee00; height: 300px; position: relative; } .box1 { border: 1px solid red; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
技术点的解释:
1、利用父元素设置相对定位,子元素设置绝对定位,那么子元素就是相对于父元素定位的特性。
2、子元素设置上和左偏移的值都为50%。
3、然后再用css3属性translate位移,给上和左都位移-50%距离,就能达到垂直水平居中的效果。