当前位置:首页 > 话题广场 > 科技专区 > 互联网

[如何让定位元素居中显示]绝对定位元素居中

本文简单介绍如何通过CSS实现常见元素的水平、垂直居中。

水平居中

  • 行内元素

这种情况最简单,只需要将行内元素包括在一个display属性为block的父元素中,并且设置父元素text-align为居中即可

.border { width: 400px; line-height: 100px; border: 1px solid red; text-align: center; }<div class="border"> <span>行内元素</span> </div>

  • 块状元素

对块状元素设置相应的外边距即可,外边距左、右设置为auto。

.parent { width: 400px; height: 100px; border: 1px solid red; } .block-child { width: 100px; border: 2px solid black; margin: 10px auto; text-align: center; }<div class="parent"> <div class="block-child">块状元素</div> </div>


  • 多个块状元素①

传统方法,在父元素设置text-align:center; 然后将需要居中的块状元素的display设置为inline-block

.border { width: 400px; line-height: 100px; border: 1px solid red; text-align: center; } .inline-block { display: inline-block; border: 1px solid black; } <div class="border"> <div class="inline-block">块状元素1</div> <div class="inline-block">块状元素2</div> <div class="inline-block">块状元素3</div> </div>

  • 多个块状元素②

使用flex布局实现,将父元素display设置为flex,同时设置子元素对齐。

.parent-flex { width: 400px; border: 1px solid red; display: flex; justify-content: center; }<div class="parent-flex"> <div style="border: 1px solid black;">块状元素1</div> <div style="border: 1px solid black;">块状元素2</div> <div style="border: 1px solid black;">块状元素3</div> </div>

垂直居中

  • 单行行内元素

将行内元素的 line-height 属性与其父元素的 height 属性设置为相同值,比如都是40px。

  • 多行的行内元素

通过设置父元素display属性为table-cell,及其他相关属性解决。

.parent-table-cell { width: 400px; height: 100px; border: 1px solid red; display: table-cell; vertical-align: middle; }<div class="parent-table-cell"> <span>行内元素1</span><br> <span>行内元素2</span><br> <span>行内元素3</span> </div>
  • 已知高度的块状元素

结合元素的position及margin属性,通过定位设置居中,父元素position设置为relative。

.item{ top: 50%; // 顶部位置位于父元素的50%处 margin-top: -50px; // margin-top 值为自身高度的一半 position: absolute; //position也可以是 }


注意:如果规定了 !DOCTYPE,则 Internet Explorer 8 (以及更高版本)支持display属性值 "inline-table"、"run-in"、"table"、"table-caption"、"table-cell"、"table-column"、"table-column-group"、"table-row"、"table-row-group"、以及 "inherit"。

喜欢就关注支持一下吧。[呲牙][呲牙]

1.《[如何让定位元素居中显示]绝对定位元素居中》援引自互联网,旨在传递更多网络信息知识,仅代表作者本人观点,与本网站无关,侵删请联系页脚下方联系方式。

2.《[如何让定位元素居中显示]绝对定位元素居中》仅供读者参考,本网站未对该内容进行证实,对其原创性、真实性、完整性、及时性不作任何保证。

3.文章转载时请保留本站内容来源地址,https://www.lu-xu.com/keji/3330293.html

上一篇

(如何群发微信推文)如何进行微信群发?

下一篇

如何让定位元素居中显示、绝对定位元素居中!

如何让定位元素居中显示,绝对定位元素水平居中!

如何让定位元素居中显示,绝对定位元素水平居中,绝对定位元素居中相关介绍,白色背景蓝色屋顶的小房子A small house with blue roof on a 实现元素水平垂直居中的方式: 利用定位+margin:auto 利用定位+margin:负值 利用定位+tr...

如何让定位元素居中显示 绝对定位元素水平居中

如何让定位元素居中显示,绝对定位元素水平居中,绝对定位元素居中相关介绍,css代码: .lprem-btn{ position: fixed; top:4rem;z-index:99999; padding: 0 1.5rem; margin: 0 0 1rem 0;wh...