整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

HTML(入门),CSS中,常见的居中方式

中,是我们编码过程中最常见的,那么,我们平时常见的居中方式,下面一一罗列出来,有错误的地方,望码友多多包涵并加以矫正。

水平居中

1、多块级元素,设置display:inline-block;使之在一行排列,在父级样式里,设置text-align:center;就可以实现水平居中的效果

body {

text-align: center;

}

div{

width: 100px;

height: 100px;

border: 1px solid;

display: inline-block;

}

2、内联元素,利用text-align:center;可以实现块级元素内部的内联元素的水平居中

div {

border: 1px solid red;

width: 100px;

height: 100px;

text-align: center;

}

<div>

<span>块级元素中的行内元素的水平居中</span>

</div>

3、块级元素,通过把固定宽高的块级元素的margin-left和margin-right设置为auto,方可实现

div{

width: 100px;

height: 100px;

border: 1px solid;

margin: 0 auto;

}

<div></div>

4、利用弹性盒子(display: flex;)

给父级定宽定高,然后设置display: flex;以及justify-content: center;方可达到水平居中效果

body {

width: 500px;

height: 500px;

display: flex;

justify-content: center;

border: 1px solid red;

}

div {

width: 100px;

height: 100px;

border: 1px solid;

}

<body>

<div></div>

</body>

垂直居中

1、内联元素(单行)

通过设置元素的height和line-height,方可达到居中效果

2、多行元素,利用表布局(table)

通过给想要居中的元素的父级设置display: talbe-cell;以及vertical-align:enter;方可居中

3、弹性盒子(flex)

给父级设置display: flex;变成弹性盒子。

分两种,

(1),主轴方向为水平,直接设置 align-items: center;

(2),主轴方向为垂直,设置flex-direction: column;改变主轴方向,然后设置justify-content: center;

弹性盒模型主轴不同,居中的方式也不同,灵活应用。

4、固定宽高的块级元素

利用父相子绝的定位原理,实现垂直居中

position: absolute;

left: 50%;

top: 50%;

margin-left: (自身高度的一半);

5,未知宽高的块级元素

利用transform: translateY(-50%);方可实现

position: absolute;

top: 50%;

transform: translateY(-50%);

水平垂直方向的居中

1、固定宽高

通过margin平移整体宽高的一半,实现水平垂直居中

{

position: absolute;

width: 100px;

height: 100px;

border: 1px solid;

left: 50%;

top: 50%;

margin-top: -50px;

margin-left: -50px;

}

2、未知宽高

利用transform中的translate()属性实现

{

position: absolute;

border: 1px solid;

left: 50%;

top: 50%;

transform: translateY(-50%);

transform: translateX(-50%);

}

3、弹性盒子(flex)

通过display:flex,把父级变成弹性盒模型,利用align-items: center;justify-content: center;方可实现居中。

注意:弹性盒子容器中,多行项目的居中方式另加计算。

body {

border: 1px solid;

width: 300px;

height: 300px;

position: relative;

display: flex;

align-items: center;

justify-content: center;

}

div {

border: 1px solid;

width: 100px;

height: 100px;

}

随着学习的不断深入,居中方式可以有很多种,我们要善于利用,更加明确什么情况下用怎样的居中方式。

里是工作狂的聚集地

职场

学术

新媒体

设计

极客

专门治愈处女座强迫症。

本文为CSS入门

翻译 redman9

原载CSS-Trick

人们经常抱怨在 CSS 中居中元素的问题,其实这个问题并不复杂,只是因为方法众多,需要根据情况从众多方法中选取一个出来。接下来,我们做一个 "决定树" 来帮我们把问题变的简单一点。首先你需要居中:

—— 水平 ——

需要居中inline或者inline-*元素(如文字或者链接)?

需要居中block类的元素?

需要居中多个block元素?

—— 垂直 ——

需要居中inline或者inline-*元素(如文字或者链接)?

需要居中block类的元素?

——既水平又垂直 ——

固定宽高

不固定宽高

使用flexbox

● ● ●

水平居中

水平居中inline或者inline-*元素

你可以轻松的在一个block元素中水平居中一个inline元素,以下代码对inlineinline-blockinline-tableinline-flex等有效。

.parent {
text-align: center;
}

水平居中block类的元素

block元素被设定固定宽度的情况下,可以使用设置元素margin-leftmargin-right的值为auto的方法实现水平居中。

.child {
width: 400px;
margin: 0 auto;
}

水平居中多个block类的元素

通过inline-block实现

.parent {
text-align: center;
}
.child {
display: inline-block;
text-align: left;
}

通过flexbox实现

.parent {
display: flex;
justify-content: center;
}

● ● ●

垂直居中

垂直居中inline或者inline-*元素

【单行】

inline/text元素可以简单的用设置相同的上下padding值达到垂直居中的目的。

.center {
pading-top: 30px; padding-bottom: 30px;
}

如果因为某种原因不能使用padding的方法,你还可以设置line-height等于height来达到目的。

.center {
height: 100px; line-height: 100px; white-space: nowrap;
}

【多行】

相同的上下padding也可以适用于此种情况,如果不能生效,你可以尝试将该元素的父元素的display设置为table,同时该元素的display设置为table-sell,然后设置vertical-align

.parent {
display: table;
width: 200px; height: 400px;
} .child {
display: table-cell;
vertical-align: middle;
}

如果上述方法不能使用,你可以尝试使用flexbox,一个单独的flexbox子元素可以轻易的在其父元素中居中。谨记,这种方法需要父元素有固定的高度。

.parent {
display: flex; justify-content: center;
flex-direction: column; height: 400px;
}

如果上述两种方式均不能使用,你可以使用“幽灵元素”技术,这种方法采用伪元素::before撑开高度 ,文字垂直居中。

.parent {
position: relative;
} .parent::before {
content: " "; display: inline-block; height: 100%; width: 1%; vertical-align: middle;
} .child {
display: inline-block;
vertical-align: middle; }

垂直居中block类的元素

【已知元素高度】

.parent { 
position: relative; } .child {
position: absolute;
top: 50%;
height: 100px;
margin-top: -50px; /* account for padding and border if not using box-sizing: border-box; */
}

【未知元素高度】

.parent {
position: relative; } .child {
position: absolute;
top: 50%;
transform: translateY(-50%); }

【使用flexbox

.parent {
display: flex;
flex-direction: column;
justify-content: center; }

● ● ●

既水平又垂直

【固定宽高】

.parent {
position: relative; } .child {
width: 300px;
height: 100px;
padding: 20px;
position: absolute;
top: 50%;
left: 50%;
margin: -70px 0 0 -170px; }

【不固定宽高】

.parent { position: relative; } .child { position: absolute; top: 50%; left: 50%;
transform: translate(-50%, -50%); }

【使用flexbox

.parent { display: flex; justify-content: center; align-items:center; }

上又要到秋招的时候了,又有不少人打算换工作了。前端在面试中总会被问到的一道基础题div居中方法,这里给大家总结一下都有哪些常用的方法。

绝对定位

  • 父级元素(parent)采用相对定位(relative),需要居中的元素(demo)采用绝对定位(absolute)。
  • 居中元素向上偏移50%,向左偏移50%,此时左顶点位于中心,不过我们需要的是整体居中,所以在偏移自身一半的宽高。(如下图)

还未偏移一半自身宽高

<style>
    .parent {
      position: relative;
      width: 500px;
      height: 500px;
      border: solid red 1px;
    }
    .demo {
      position: absolute;
      width: 100px;
      height: 100px;
      border: solid blue 1px;
      top: 50%;
      left: 50%;
      margin-top: -50px;
      margin-left: -50px;
    }
  </style>
  <body>
    <div class="parent">
      <div class="demo"></div>
    </div>
  </body>

弹性方法居中

通过flex弹性布局设置垂直居中和水平居中

  <style>
    .parent {
      width: 500px;
      height: 500px;
      border: solid red 1px;
      display: flex;
      // 垂直,水平居中
      align-items: center;
      justify-content: center;
    }
    .demo {
      width: 100px;
      height: 100px;
      border: solid blue 1px;
    }
  </style>
  <body>
    <div class="parent">
      <div class="demo"></div>
    </div>
  </body>

使用transform居中

在子元素不知道自身宽高情况,使用transform进行比偏移。

  <style>
    .parent {
      position: relative;
      width: 500px;
      height: 500px;
      border: solid red 1px;
    }
    .demo {
      position: absolute;
      border: solid blue 1px;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
  </style>
  <body>
    <div class="parent">
      <div class="demo">居中</div>
    </div>
  </body>

以上3种是常用的方法,当然还有其他居中方法比如grid布局,table-cell布局等。