媛代码社区

分享 | CSS 中各种居中方式

技术
codinggirls
· 阅读 145 · 评论 0 · 1 年前

一、水平居中

1. 内联元素

如果想设置内联元素居中,仅需在内联元素的外层添加一个块级父元素,然后设置:

<div class="center-children">
    <a>我是内联元素,我要水平居中哦!</a>
</div>
.center-children {
  text-align: center;
}

2.块级元素

如果设置块级元素居中,要将块级元素的 margin-left 和 margin-right 属性设置成auto,并且块级元素一定要设置宽度,否则元素默认为100%宽度,不需要居中。

<div class="center-me">
    我是块级元素,我要水平居中
</div>
.center-me {
  width:200px;
  margin: 0 auto;
}

3.两个以上块级元素

如果想把两个以上块级元素居中,我们要将子元素设置成内联元素
方法1

<div class="wrapper">
    <div>
        我想水平居中
    </div>
    <div>
        我想水平居中
    </div>
    <div>
        我想水平居中
    </div>
</div>
.wrapper{
  text-align:center;
}
.wrapper div{
  display:inline-block;
  background-color:#000;
  color:#fff;
}

方法2 使用 flexbox

<div class="wrapper">
    <div>
        我想水平居中
    </div>
    <div>
        我想水平居中
    </div>
    <div>
        我想水平居中
    </div>
</div>
.wrapper{
  display:flex;
  justify-content:center;
}
.wrapper div{
  background-color:#000;
  color:#fff;
  margin-left:10px;
}

二、垂直居中

1.内联元素

方法1

<div class="wrapper">
    我要垂直居中
</div>
.wrapper{
 background-color:#000;
 padding:40px 40px;
 color:#fff;
}

方法2

<div class="wrapper">
    我要垂直居中
</div>
.wrapper{
 background-color:#000;
 color:#fff;
 height:100px;
 line-height:100px;
}

方法3 设置padding可以可以实现多行内容居中,我们也可以通过设置display:table来垂直居中多行内容

<div class="wrapper">
    <p>我要垂直居中啊a我要垂直居中啊a我要垂直居中啊a我要垂直居中啊a</p>
</div>
.wrapper{
   display:table;
   background-color:#000;
   color:#fff;
   width:200px;
   height:200px;
}
.wrapper div{
  display:table-cell;
  vertical-align:middle;
}

方法4使用flexbox(父级元素要设置高度哦)

<div class="wrapper">
    <p>我要垂直居中啊a我要垂直居中啊a我要垂直居中啊a我要垂直居中啊a</p>
</div>
.wrapper{
 display:flex;
 background-color:#000;
 color:#fff;
 width:200px;
 height:200px;
 flex-direction: column;
 justify-content: center;
}

2.块级元素

方法1 元素宽度高度固定

<div class="wrapper">
    <div>我要垂直居中啊a我要垂直居中啊a我要垂直居中啊a我要垂直居中啊a</div>
</div>
.wrapper{
 position:relative;
 background-color:#000;
 color:#fff;
 width:200px;
 height:200px;
}
.wrapper div {
  position: absolute;
  background-color:red;
  top: 50%;
  left: 20px;
  right: 20px;
  height: 100px;
  margin-top: -70px;
  background: black;
  color: white;
  padding: 20px;
}

方法2 元素宽度高度不固定

<div class="wrapper">
    <div>我要垂直居中啊a我要垂直居中啊a我要垂直居中啊a我要垂直居中啊a</div>
</div>
.wrapper{
 position:relative;
 background-color:#000;
 color:#fff;
 width:200px;
 height:200px;
}
.wrapper div {
  position: absolute;
  top: 50%;
  transform:translateY(-50%);
  background-color:red;
}

方法3 使用 flexbox

<div class="wrapper">
    <div>我要垂直居中啊a我要垂直居中啊a我要垂直居中啊a我要垂直居中啊a</div>
</div>
.wrapper{
 display:flex;
 background-color:#000;
 color:#fff;
 width:200px;
 height:200px;
 flex-direction: column;
 justify-content: center;
}

三、水平和垂直居中

方法1 元素宽度高度固定

<div class="wrapper">
    <div>我要垂直居中啊a我要垂直居中啊a我要垂直居中啊</div>
</div>
.wrapper{
 position:relative;
 background-color:#000;
 color:#fff;
 width:200px;
 height:200px;
}
.wrapper div {
  position: absolute;
  width:100px;
  height:100px;
  top:50%;
  left:50%;
  margin-top:-50px;
  margin-left:-50px;
  background-color:red;
}

方法2 元素宽度高度不固定

<div class="wrapper">
    <div>我要垂直居中啊a我要垂直居中啊a我要垂直居中啊</div>
</div>
.wrapper{
 position:relative;
 background-color:#000;
 color:#fff;
 width:200px;
 height:200px;
}
.wrapper div {
  position: absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  background-color:red;
}

方法3 使用 flexbox

<div class="wrapper">
    <div>我要垂直居中啊a我要垂直居中啊a我要垂直居中啊</div>
</div>
.wrapper{
 display:flex;
 background-color:#000;
 color:#fff;
 width:200px;
 height:200px;
 justify-content:center;
 align-items: center;
}
.wrapper div {
  width:100px;
  height:100px;
  background-color:red;
}

四、总结

以上就是 CSS 的各种居中方式啦,要灵活使用哦!

1
帖子评论(0)
发起评论
暂无数据
Loading
推荐帖子
  • 推荐给开发者10款非常好用的 Go...
  • java_redis 主从复制
  • 有姐妹能推荐比较好的编码提升途径吗?
  • CSS 中 position 属性详解
  • 河南下大雨了,朋友圈发的地铁里水深...
社区宗旨
媛代码社区是女性科技从业者的聚集地
我们鼓励:
分享生活经验,日常趣事
晒晒您的作品,讨论讨论技术
也可以吐槽职场,抱怨不公
我们致力于:
让更多的人听到我们的声音
打破社会传统偏见!提升个人能力!
快来加入媛代码大家庭吧!
加入组织
二维码

媛代码社区微信公众号