flex垂直居中_CSS实现居中

最新推荐文章于 2024-06-02 17:14:20 发布
最新推荐文章于 2024-06-02 17:14:20 发布
阅读量894 收藏
点赞数
文章标签： flex垂直居中 h5文字垂直居中 html文字垂直居中 input文字垂直居中 javafx设置label文本居中 listwidget设置条目文本居中

一、水平居中
1.1 要居中的是内联元素或者行内-块级元素？（比如文字或链接）
块级父元素设置text-align为center则其内内联元素水平居中。This will work for inline, inline-block, inline-table, inline-flex, etc.
1.2 要居中的是块级元素？
设定了宽度的块级元素（不设定宽度将会自动铺满那就不需要水平居中啦）：把该元素的margin-left和 margin-right 都设置成auto来实现水平居中。
1.3 一行内不止一个块级元素？
1.3.1 如果在一行内有两个或多个块级元素需要水平居中，得为它们设置不同的display类型。/* 方法1-将这些块级元素设置display为inline-block，再将其父容器设置text-align为center*/ /* 方法2-直接给父容器设置成flex布局，再将justify-content属性设置成center*/
1.3.2 如果是多个块级元素依次堆在上一个的顶部，那margin auto策略还是奏效的。

二、垂直居中
2.1 要居中的是内联元素或者行内-块级元素？（比如文字或链接）
2.1.1 是单行？
2.1.1.1单行的内联元素只需将上下padding设置成等值就可以实现垂直居中。
2.1.1.2 在某些不能使用padding的情况下，并确定是不换行的文本，则可以使用line-height等于height的方法来使单行文本内容垂直居中。
2.1.2 是多行？
2.1.2.1 给多行文本设置上下等大的padding也可以使其垂直居中。但如果此法不奏效，则有可能是文字在的元素成了table cell，这时候就要用vertical-align来解决问题。
2.1.2.2 如果table-like已经过时不用了，用flexbox是更佳方案。一个flex-child可以很容易在flex-parent里实现居中（父容器必须有个固定高度px、%等）。
2.1.2.3 除去以上两种方法，你还可以使用幽灵元素技巧"ghost element" technique，在这种技术中，容器内放置一个完全高度的伪元素，并且文本与此垂直对齐。
2.2 要居中的是块级元素？
2.2.1 该块级元素高度已知
你明确知道元素的高度，则可以像下面这样来垂直居中：/* 元素相对其父容器顶部50%的位置 */ / * 元素的margin-top设置为负(自身height*0.5)*/
2.2.2 该块级元素高度未知
相对父容器顶部50%定位，再纵向回移自身高度的50%即tramsform: translateY(-50%)，即可实现垂直居中。
2.2.3 是否介意该元素撑开其父容器高度？
如果不介意，那只需使用tables或CSS display使元素变成tables再使vertical-align为middle就能实现垂直居中。
2.2.4 你要用flexbox吗？
使用flex布局可以很轻松实现垂直居中：align-items: center;
或者通过flex-direction: column;将默认横向的主轴改为垂直方向，起点在上沿。并justify-content: center;也可以。

三、垂直水平居中
3.1 该元素的宽高固定吗？
在将元素绝对定位为top: 50%; left: 50%;后，可以使用值为宽的一半和高的一半的负margin实现垂直水平居中。（跨浏览器支持很不错）
3.2 该元素宽高未知？
（1）如果宽高未知，在将元素绝对定位为top: 50%; left: 50%;后，可以使用transform属性来做负的50%移动（基于当前元素宽高）。
（2）也可以元素相对父容器绝对定位(left: 0;right: 0;top: 0;bottom: 0;)并margin: auto，不需要提前知道尺寸兼容性好。
3.3 你要用flexbox吗？
对flexbox进行垂直水平居中，只需设置两个属性为center: align-items、justify-content。
3.4 你要用grid布局吗？
父容器设置为grid布局后，子元素直接margin: auto;即可实现垂直水平居中。

一、水平居中

1.1 要居中的是内联元素或者行内-块级元素？（比如文字或链接）

块级父元素设置text-align为center则其内内联元素水平居中。This will work for inline, inline-block, inline-table, inline-flex, etc.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>块级父元素内的行内元素居中</title>
  <style>
    body {
      background: #f06d06;
    }
    header, nav {
      text-align: center;  /* 块级父元素设置text-align为center则其内内联元素水平居中*/
      background: white;
      margin: 20px 0;
      padding: 10px;
    }

    nav a {
      text-decoration: none;
      background: #333;
      border-radius: 5px;
      color: white;
      padding: 3px 8px;
    }
  </style>
</head>
<body>
  <header>
    This text is centered.
  </header>

  <nav role='navigation'>
    <a href="#0">One</a>
    <a href="#0">Two</a>
    <a href="#0">Three</a>
    <a href="#0">Four</a>
  </nav>  
</body>
</html>

c3a4f8641d9714eb8370bf03af05c9d7.png

1.2 要居中的是块级元素？

设定了宽度的块级元素（不设定宽度将会自动铺满那就不需要水平居中啦）：把该元素的margin-left和 margin-right 都设置成auto来实现水平居中。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>定宽块级元素居中</title>
  <style>
    body {
      background: #f06d06;
    }

    main {
      background: white;
      margin: 20px 0;
      padding: 10px;
    }

    .center {
      margin: 0 auto; /* 定宽块级元素的水平居中通过设置左右margin为auto来实现*/
      width: 200px;
      background: black;
      padding: 20px;
      color: white;
    }
  </style>
</head>
<body>
  <main>
    <div class="center">
      I'm a block level element and am centered.
    </div>
  </main>
</body>
</html>

87b0f1f48946034ac5ad94533ed8a88d.png

1.3 一行内不止一个块级元素？

1.3.1 如果在一行内有两个或多个块级元素需要水平居中，得为它们设置不同的display类型。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>一行内使两个或者多个块级元素水平居中</title>
  <style>
    body {
      background: #f06d06;
      font-size: 80%;
    }
    main {
      background: white;
      margin: 20px 0;
      padding: 10px;
    }
    main div {
      background: black;
      color: white;
      padding: 15px;
      max-width: 125px;
      margin: 5px;
    }
    .inline-block-center {
      text-align: center; /* 方法1-将这些块级元素设置display为inline-block，再将其父容器设置text-align为center*/
    }
    .inline-block-center div {
      display: inline-block;
      text-align: left;
    }
    .flex-center {
      display: flex; /* 方法2-直接给父容器设置成flex布局，再将justify-content属性设置成center*/
      justify-content: center;
    }
  </style>
</head>
<body>
  <main class="inline-block-center">
    <div>
      I'm an element that is block-like with my siblings and we're centered in a row.
    </div>
    <div>
      I'm an element that is block-like with my siblings and we're centered in a row. I have more content in me than my siblings do.
    </div>
    <div>
      I'm an element that is block-like with my siblings and we're centered in a row.
    </div>
  </main>
  <main class="flex-center">
    <div>
      I'm an element that is block-like with my siblings and we're centered in a row.
    </div>
    <div>
      I'm an element that is block-like with my siblings and we're centered in a row. I have more content in me than my siblings do.
    </div>
    <div>
      I'm an element that is block-like with my siblings and we're centered in a row.
    </div>
  </main>
</body>
</html>

8ae47c5caa238ef57caa31ee75a04fbe.png

https://jsbin.com/qoxafuzuxe/edit?html,css,output

1.3.2 如果是多个块级元素依次堆在上一个的顶部，那margin auto策略还是奏效的。

https://jsbin.com/hobuxuvejo/edit?html,css,output

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>多个堆叠摞起来的块级元素们水平居中可以采用margin auto</title>
  <style>
    body {
      background: #f06d06;
      font-size: 80%;
    }
    main {
      background: white;
      margin: 20px 0;
      padding: 10px;
    }
    main div {
      background: black;
      margin: 0 auto;     /* 多个堆叠的顶宽块级元素可采用margin左右设置auto来水平居中*/
      color: white;
      padding: 15px;
      margin: 5px auto;
    }
    main div:nth-child(1) {
      width: 200px;
    }
    main div:nth-child(2) {
      width: 400px;
    }
    main div:nth-child(3) {
      width: 125px;
    }
  </style>
</head>
<body>
  <main>
    <div>
      I'm an element that is block-like with my siblings and we're centered in a row.
    </div>
    <div>
      I'm an element that is block-like with my siblings and we're centered in a row. I have more content in me than my siblings do.
    </div>
    <div>
      I'm an element that is block-like with my siblings and we're centered in a row.
    </div>
  </main>
</body>
</html>

f8de4ef74f87d7204f4418ebc35ca530.png

二、垂直居中

2.1 要居中的是内联元素或者行内-块级元素？（比如文字或链接）
2.1.1 是单行？
2.1.1.1单行的内联元素只需将上下padding设置成等值就可以实现垂直居中。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>单行内联元素垂直居中</title>
  <style>
    body {
      background: #f06d06;
      font-size: 80%;
    }
    main {
      background: white;
      margin: 20px 0;
      padding: 50px;
    }
    main a {
      background: black;
      color: white;
      padding: 40px 30px;  /* 单行内联元素设置上下padding等大即可实现垂直居中 */
      text-decoration: none;
    }
  </style>
</head>
<body>
  <main>
    <a href="#0">We're</a>
    <a href="#0">Centered</a>
    <a href="#0">Bits of</a>
    <a href="#0">Text</a>
  </main>
</body>
</html>

688e714e46a4ac2016c038a939e8232f.png

2.1.1.2 在某些不能使用padding的情况下，并确定是不换行的文本，则可以使用line-height等于height的方法来使单行文本内容垂直居中。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>单行文本垂直居中</title>
  <style>
    body {
      background: #f06d06;
      font-size: 80%;
    }
    main {
      background: white;
      margin: 20px 0;
      padding: 40px;
    }
    main div {
      background: black;
      color: white;
      height: 100px;
      line-height: 100px;
      padding: 20px;
      width: 50%;
      white-space: nowrap;
    }
  </style>
</head>
<body>
  <main>
    <div>
      I'm a centered line.
    </div>
  </main>
</body>
</html>

22d87e79cb8e1999508f8e3d23278a10.png

2.1.2 是多行？

2.1.2.1 给多行文本设置上下等大的padding也可以使其垂直居中。但如果此法不奏效，则有可能是文字在的元素成了table cell，这时候就要用vertical-align来解决问题。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>多行文本垂直居中</title>
  <style>
    body {
      background: #f06d06;
      font-size: 80%;
    }
    table {
      background: white;
      width: 240px;
      border-collapse: separate;
      margin: 20px;
      height: 250px;
    }
    table td {
      background: black;
      color: white;
      padding: 20px;
      border: 10px solid white;
      /* default is vertical-align: middle; */
    }
    .center-table {
      display: table;
      height: 250px;
      background: white;
      width: 240px;
      margin: 20px;
    }
    .center-table p {
      display: table-cell;
      margin: 0;
      background: black;
      color: white;
      padding: 20px;
      border: 10px solid white;
      vertical-align: middle; /* 多行文字所在元素变成table cell时需要设置vertical-align为middle实现居中
    }
  </style>
</head>
<body>
  <table>
    <tr>
      <td>
        I'm vertically centered multiple lines of text in a real table cell.
      </td>
    </tr>
  </table>

  <div class="center-table">
    <p>I'm vertically centered multiple lines of text in a CSS-created table layout.</p>
  </div>
</body>
</html>

38e09afc843658a3cbb0856e059c725c.png

2.1.2.2 如果table-like已经过时不用了，用flexbox是更佳方案。一个flex-child可以很容易在flex-parent里实现居中（父容器必须有个固定高度px、%等）。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>多行文本垂直居中</title>
  <style>
    body {
      background: #f06d06;
      font-size: 80%;
    }
    div {
      background: white;
      width: 240px;
      margin: 20px;
    }
    .flex-center {
      background: black;
      color: white;
      border: 10px solid white;
      display: flex;
      flex-direction: column; /*决定项目主轴方向从上往下排列 */
      justify-content: center; /*项目在主轴方向居中对齐 */
      height: 200px; /*注意：此容器（container）是有高度的 */
      resize: vertical;
      overflow: auto;
    }
    .flex-center p {
      margin: 0;
      padding: 20px;
    }
  </style>
</head>
<body>
  <div class="flex-center">
    <p>I'm vertically centered multiple lines of text in a flexbox container.</p>
  </div>
</body>
</html>

8b4f10f6dc640aa665819a995581db94.png

2.1.2.3 除去以上两种方法，你还可以使用幽灵元素技巧"ghost element" technique，在这种技术中，容器内放置一个完全高度的伪元素，并且文本与此垂直对齐。https://jsbin.com/locubutemu/1/edit?html,css,output

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>多行文本垂直居中</title>
  <style>
    body {
      background: #f06d06;
      font-size: 80%;
    }
    div {
      background: white;
      width: 240px;
      height: 200px;
      margin: 20px;
      color: white;
      resize: vertical;
      overflow: auto;
      padding: 20px;
    }
    .ghost-center {
      position: relative;
    }
    .ghost-center::before {
      content: " ";
      display: inline-block;
      height: 100%;  /* 容器内放置一个完全高度的伪元素*/
      width: 1%;
      vertical-align: middle; /*并且文本与此垂直对齐*/
    }
    .ghost-center p {
      display: inline-block;
      vertical-align: middle; /*并且文本与此垂直对齐*/
      width: 190px;
      margin: 0;
      padding: 20px;
      background: black;
    }
  </style>
</head>
<body>
  <div class="ghost-center">
    <p>I'm vertically centered multiple lines of text in a container. Centered with a ghost pseudo element</p>
  </div>
</body>
</html>

5a712808ebeffd25ba37af8cbc68dd87.png

2.2 要居中的是块级元素？
2.2.1 该块级元素高度已知

在网页布局中不知道高度是很常见的，原因很多：若宽度发生了变化则文本重流会改变高度；文本样式的变化会改变高度；文本数量的变化会改变高度；具有固定宽高比的元素如图像在调整大小时可改变高度。但如果你明确知道元素的高度，可以像下面这样来垂直居中：

.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; */
}

例子：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>已知高度块级元素垂直居中</title>
  <style>
    body {
      background: #f06d06;
      font-size: 80%;
    }
    main {
      background: white;
      height: 300px;
      margin: 20px;
      width: 300px;
      position: relative;  /* 其父容器设置相对定位 */
      resize: vertical;
      overflow: auto;
    }
    main div {
      position: absolute;  /* 元素自身设置绝对定位 */
      top: 50%;            /* 元素相对其父容器高50%的位置 */
      left: 20px;
      right: 20px;
      height: 100px;       /* 注意没有设置box-sizing: border-box;的话此处height仅指内容宽度 */
      margin-top: -70px;  /* 所以实际高度为20(padding-top)+100(height)+20(padding-bottom)=140px */
      background: black;
      color: white;
      padding: 20px;
    }
  </style>
</head>
<body>
  <main>
    <div>
       I'm a block-level element with a fixed height, centered vertically within my parent.
    </div>
  </main>
</body>
</html>

fa900db38f9584b5c960345715f051d2.png

2.2.2 该块级元素高度未知

相对父容器顶部50%定位，再纵向回移自身高度的50%，即可实现垂直居中。

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

例子：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>未知高度块级元素垂直居中</title>
  <style>
    body {
      background: #f06d06;
      font-size: 80%;
    }
    main {
      background: white;
      height: 300px;
      margin: 20px;
      width: 300px;
      position: relative;  /* 相对父容器定位 */
      resize: vertical;
      overflow: auto;
    }
    main div {
      position: absolute;
      top: 50%;           /* 相对父容器顶部顶部50%定位 */
      left: 20px;
      right: 20px;
      background: black;
      color: white;
      padding: 20px;
      transform: translateY(-50%); /* 再纵向回移自身高度的50% */
      resize: vertical;
      overflow: auto;
    }
  </style>
</head>
<body>
 <main> 
  <div>
     I'm a block-level element with an unknown height, centered vertically within my parent.
  </div> 
 </main>
</body>
</html>

798788cf7d8d4df814c88585c73f72bc.png

2.2.3 是否介意该元素撑开其父容器高度？

如果不介意，那只需使用tables或CSS display使元素变成tables再使vertical-align为middle就能实现垂直居中。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>不介意撑开父容器高度时使元素垂直居中</title>
  <style>
    body {
      background: #f06d06;
      font-size: 80%;
    }

    main {
      background: white;
      height: 300px;
      margin: 20px;
      width: 300px;
      position: relative;
      padding: 20px;
      display: table; /* 父元素必须设置display为table但这样撑开了其高度 */
    }
    main div {
      background: black;
      color: white;
      padding: 20px;
      display: table-cell; /* 使用tables或CSS display使元素变成tables */
      vertical-align: middle; /* 再使vertical-align为middle */
    }
  </style>
</head>
<body>
 <main> 
  <div>
     I'm a block-level element with an unknown height, centered vertically within my parent.
  </div> 
 </main>
</body>
</html>

8dcdce4f3319065dd401cf996174fc4f.png

2.2.4 你要用flexbox吗？

使用flex布局可以很轻松实现垂直居中：

main {
  display: flex;
  align-items: center;
}

或者通过flex-direction: column;将默认横向的主轴改为垂直方向，起点在上沿。并justify-content: center;也可以。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>flex使元素垂直居中</title>
  <style>
    body {
      background: #f06d06;
      font-size: 80%;
    }

    main {
      background: white;
      height: 300px;
      width: 200px;
      padding: 20px;
      margin: 20px;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }

    main div {
      background: black;
      color: white;
      padding: 20px;
    }
  </style>
</head>
<body>
 <main>
  <div>
     I'm a block-level element with an unknown height, centered vertically within my parent.
  </div>  
 </main>
</body>
</html>

c0f604c9518d277da2caf2dcb41370de.png

You can also get centering in flexbox usingmargin: auto;on the child element.(也可以在flexbox里给子元素设置margin: auto; 来居中)

三、垂直水平居中

3.1 该元素的宽高固定吗？

在将元素绝对定位为top: 50%; left: 50%;后，可以使用值为宽的一半和高的一半的负margin实现垂直水平居中。（跨浏览器支持很不错）

.parent {
  position: relative;
}

.child {
  width: 300px;
  height: 100px;
  padding: 20px;

  position: absolute;
  top: 50%;
  left: 50%;

  margin: -70px 0 0 -170px;
}

224f394a4c2e6796366e8303a4feeaad.png 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>绝对定位顶左各50%再负margin为宽高一半使元素垂直水平居中</title>
  <style>
    body {
      background: #f06d06;
      font-size: 80%;
      padding: 20px;
    }
    main {
      position: relative;
      background: white;
      height: 200px;
      width: 60%;
      margin: 0 auto;
      padding: 20px;
      resize: both;
      overflow: auto;
    }
    main div {
      background: black;
      color: white;
      width: 200px;
      height: 100px;
      margin: -70px 0 0 -120px;
      position: absolute;
      top: 50%;
      left: 50%;
      padding: 20px;
    }
  </style>
</head>
<body>
 <main>
  <div>
     I'm a block-level element a fixed height and width, centered vertically within my parent.
  </div> 
</main>
</body>
</html>

3.2 该元素宽高未知？

(1) 如果宽高未知，在将元素绝对定位为top: 50%; left: 50%;后，可以使用transform属性来做负的50%移动（基于当前元素宽高）。

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

f712ae6f71a8180dca537d1fd70b9b95.png 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>绝对定位顶左各50%再transform负的各50%位移使未知宽高元素垂直水平居中</title>
  <style>
    body {
      background: #f06d06;
      font-size: 80%;
      padding: 20px;
    }
    main {
      position: relative;
      background: white;
      height: 200px;
      width: 60%;
      margin: 0 auto;
      padding: 20px;
      resize: both;
      overflow: auto;
    }
    main div {
      background: black;
      color: white;
      width: 50%;
      transform: translate(-50%, -50%);
      position: absolute;
      top: 50%;
      left: 50%;
      padding: 20px;
      resize: both;
      overflow: auto;
    }
  </style>
</head>
<body>
 <main> 
  <div>
     I'm a block-level element of an unknown height and width, centered vertically within my parent.
  </div> 
 </main>
</body>
</html>

(2) 也可以元素相对父容器绝对定位(left: 0;right: 0;top: 0;bottom: 0;)并margin: auto，不需要提前知道尺寸兼容性好。

https://jsbin.com/ruxekiruho/edit?html,css,output

06f806df6537087225916327c0a11bff.png

3.3 你要用flexbox吗？

对flexbox进行垂直水平居中，只需设置两个属性为center: align-items、justify-content。

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

0d03107149310688f8dcc0d4b2348e9b.png 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>使用flex使元素垂直水平居中</title>
  <style>
    body {
      background: #f06d06;
      font-size: 80%;
      padding: 20px;
    }
    main {
      background: white;
      height: 200px;
      width: 60%;
      margin: 0 auto;
      padding: 20px;
      display: flex;
      justify-content: center;
      align-items: center;
      resize: both;
      overflow: auto;
    }
    main div {
      background: black;
      color: white;
      width: 50%;
      padding: 20px;
      resize: both;
      overflow: auto;
    }
  </style>
</head>
<body>
 <main>
  <div>
     I'm a block-level-ish element of an unknown width and height, centered vertically within my parent.
  </div> 
 </main>
</body>
</html>

3.4 你要用grid布局吗？

父容器设置为grid布局后，子元素直接margin: auto;即可实现垂直水平居中。

body, html {
  height: 100%;
  display: grid;
}
span { /* thing to center */
  margin: auto;
}

2c30719704354f7a2ace69bf311c837b.png 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>使用flex使元素垂直水平居中</title>
  <style>
    body, html {
      height: 100%;
    }
    main {
      display: grid;
      height: 100%;
    }
    .center-me {
      margin: auto;
    }
  </style>
</head>
<body>
  <main>
    <div class="center-me">
      I'm centered!
    </div>
  </main>
</body>
</html>

在线代码预览示例：https://jsbin.com/futabucoyi/2/edit?html,css,output

本文参考引用来源如下：

https://css-tricks.com/centering-css-complete-guide/​css-tricks.com
weixin_39553352
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
flex布局以及实现垂直居中
weixin_49519788的博客
06-21 3万+
flex布局的原理 给父盒子添加flex属性，来控制盒子的位置和排列方式（当我们给父元素设置为flex布局以后，子元素的float、clear和vertical-align属性将失效） flex:布局又叫伸缩布局，弹性布局，伸缩盒布局，flex布局 flex常见的父项常见属性 flex-direction：设置主轴的方向 justify-content：设置主轴上的子元素排列方式 flex-wrap：设置子元素是否换行 align-content：设置侧轴上的子元素的排列方式（多行） align-items
CSS水平垂直居中的方法（Flex、Grid、translate、margin..）
qq_44396859的博客
10-10 796
其实网上还有一些神通广大的网友的方法能够实现，但由于代码量的问题或者副作用的问题较多，就不再赘述，本文介绍的以上几种方法按照顺序依次推荐。参考链接：元素水平垂直居中都有哪些方法 - 简书。
3、flex弹性盒布局（flex:1?、水平垂直居中、三栏布局）
最新发布
m0_73560798的博客
06-02 1249
任何一个容器都可以指定为 Flex 布局。块元素，行内元素即可。div{span{注意，设为 Flex 布局以后，子元素的floatclear和属性将失效。
flex的水平垂直居中
aleluye的博客
04-06 234
flex实现居中
css垂直水平居中的详细实现方式（6种）
weixin_46591819的博客
02-22 8616
css垂直水平居中方式
Flex布局实现div内部子元素垂直居中
fengchengwu2012的博客
01-04 1万+
1、Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为Flex布局。注意，设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。 采用Flex布局的元素，称为Flex容器（flex container），简称”容器”。它的所有子元素自动成为容器成员，称为Flex项目（flex ...
使用css实现div垂直居中的示例
09-25
例如，使用`display: flex`和`align-items: center`或使用`display: grid`和`place-items: center`，可以更简便地实现子元素在容器内的垂直居中。但请注意，这些方法在旧版浏览器中可能不完全支持，因此在实际应用中...
CSS中垂直居中的简单实现方法
09-25
本文将详细介绍几种CSS中垂直居中的简单实现方法，特别关注使用CSS3的transform属性来达成这一目标。 1. **利用Flexbox布局实现垂直居中** Flexbox布局模型为实现垂直居中提供了方便。首先，将父元素设置为flex...
CSS实现垂直居中的4种思路详解
09-24
CSS实现垂直居中是网页布局中的常见需求，本文将详细讲解四种不同的方法，帮助开发者更好地理解和运用这些技巧。 1. **行高line-height实现单行文本垂直居中** 单行文本的垂直居中可以通过设置`line-height`来实现...
实现css文字垂直居中的8种方法
10-15
在CSS布局中，实现文字垂直居中是一项常见的需求。标题提到的"实现css文字垂直居中的8种方法"涵盖了多种不同的技术，适用于不同场景。以下是对这些方法的详细解释： 1. **绝对定位和负外边距**： 这种方法适用于...
CSS未知高度垂直居中的实现
09-22
在CSS布局中，垂直居中是一项常见的需求，尤其当元素的高度未知时，实现起来更具挑战性。本篇文章主要探讨了几种在CSS中实现未知高度元素垂直居中的方法。这些方法在不同浏览器间可能存在兼容性问题，但通过适当的...
元素垂直居中的五种方式
weixin_45061726的博客
12-12 7351
html 元素标签内的内容垂直居中 的五种方式
css垂直水平居中(父元素宽高有无情况）+ flex用法
Rziziの博客
01-26 1067
1. 父元素设置display:flex, 子元素设置 margin:auto. 2. 父元素相对定位，子元素绝对定位 4个属性都设置0，再设置margin:auto. 3. 父元素相对定位，子元素绝对定位，`left:50%,top:50%,transform:translate(-50%,-50%)` 4. flex布局，父元素 `display:flex,justify-content:center,align-items:center`
flex垂直居中_动画 | 一文掌握 Flex 布局
weixin_39562089的博客
11-30 545
写在前边网页布局，是前端入门的时候必学、必须熟练的一门技术，学到什么程度算是入门了呢？随便给你一个网站，你就可能快速的分析出网页的结构，然后搭建出模型，这是前端网页布局入门的最基本要求。作为一个前端初学者，在学习的时候可能会用到一些盒模型传统的布局方式(display + position + float)，很多小伙伴用着用着就觉得这种传统布局写一些样式比较麻烦、不方便，比如垂直居中的传...
CSS flex样式垂直居中
热门推荐
黄彪博客
07-15 6万+
文章参考 Flex 布局教程：语法篇 问题描述 由于div默认是没有高度的，如果设置了高度，默认是从左到右，从上到下的顺序来排布； 如果要做垂直居中，就需要计算div控件的高度，如果内容变多或者变少，又会导致定位不准确，因此，最稳妥的办法就是让浏览器自己去根据div的高度居中显示 flex 个人理解 作用自身的样式 flex-direction属性决定主轴的方向（即项目的排列方向） flex...
通过flex布局实现横向纵向布局并使内容垂直居中
qq_20411471的博客
12-04 5893
1.test.wxml <view class="content"> <view class="left"><view>left</view></view> <view class="middle">middle</view> <view class="right"> <view class="item">2</view> <view class="ite
css flex布局实现文字垂直居中
Demon's blog
01-05 1万+
<style> .innner { display: flex; background-color: #ea4d22; height: 100px; /* line-height: 100px; */ /* text-align: center; */ justify-content: center; flex-direction: column; } .i.
谈谈flex布局实现水平垂直居中
Drew_杨叔
02-28 2152
我们在这要谈的是用flex布局来实现水平和垂直居中。随着移动互联网的发展，对于网页布局来说要求越来越高，而传统的布局方案对于实现特殊布局非常不方便，比如垂直居中。所以09年，W3C 提出了一种新的方案----Flex 布局，可以简便、完整、响应式地实现各种页面布局。 我们想用flex布局居中的话就得先了解什么是flex布局，flex布局也叫弹性布局。就是能够实现一些特殊的布局方式。言归正传，fle...
用弹性盒子实现垂直居中及用css实现图片垂直居中
2302_79245293的博客
12-17 372
可以通过以下步骤：2、在容器内部的项目上应用来实现水平居中。
java文本框字体垂直居中_实现css文字垂直居中的8种方法
05-28
好的，关于Java文本框字体垂直居中，可以使用以下代码实现： ``` JTextField textField = new JTextField(); textField.setHorizontalAlignment(JTextField.CENTER); textField.setVerticalAlignment(JTextField.CENTER); ``` 这里使用了JTextField类的setHorizontalAlignment和setVerticalAlignment方法，分别用来设置文本框中的文本水平和垂直方向的对齐方式，将其设置为居中即可实现文本垂直居中。 另外，关于CSS文字垂直居中的8种方法，可以参考以下内容： 1. 使用line-height属性，将行高设置为与容器高度相同。 2. 使用display:table-cell属性，将文本容器的display属性设置为table-cell，然后使用vertical-align:middle属性将文字垂直居中。 3. 使用display:flex属性，将文本容器的display属性设置为flex，然后使用align-items:center属性将文字垂直居中。 4. 使用position:absolute属性，将文本容器的position属性设置为absolute，然后使用top:50%和transform:translateY(-50%)属性将文字垂直居中。 5. 使用display:inline-block和vertical-align:middle属性，将文本容器的display属性设置为inline-block，然后使用vertical-align:middle属性将文字垂直居中。 6. 使用padding和line-height属性，将文本容器的padding属性设置为相同的值，然后将line-height设置为与容器高度相同即可。 7. 使用CSS Grid布局，将文本容器的display属性设置为grid，然后使用align-items:center属性将文字垂直居中。 8. 使用CSS Grid布局，将文本容器的display属性设置为grid，然后使用place-items:center属性将文字水平和垂直居中。 希望这些内容能对你有所帮助。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值