CSS上下居中左右居中

一时失言乱红尘 2024-03-22 15:07 194阅读 0赞

一、

1、容器内部元素上下左右居中
2、内部元素每行的高度以最高的为准

  1. <div style="margin-top: 10px;
  2.         border: 1px solid #c5c5c5;
  3.         display:flex; 
  4.         flex-wrap: wrap;
  5.         justify-content: center;
  6.         align-content:center;
  7.         height: 100px;
  8.     ">
  9.     <div class="item" style="align-items: center;">
  10.         111<br/>111
  11.     </div>
  12.     <div class="item" >
  13.         2
  14.     </div>
  15.     <div class="item" >
  16.         3
  17.     </div>
  18.     <div class="item" >
  19.         4
  20.     </div>
  21. </div>

二、单行文字设置上下居中

设置文本的行高实现上下居中
只有单行文字适用

  1. <div style="background-color:red;height:100px;line-height:100px;" >
  2.      hello word!
  3.  </div>

其他样式

1、背景渐变样式

  1. <div style="background-image:linear-gradient(to top,#96e15d 0%,#00e3ae 100%);
  2.                 width:100px;
  3.                 height:100px;" >
  4. </div>

发表评论

表情：
评论列表 （有 0 条评论，194人围观）

还没有评论，来说两句吧...

相关阅读

    相关 css居中

    在echart图里,center属性控制居中   最外层要把宽度设置到全屏最大,且单位为px, 他的块级元素要设置为百分比,块级元素里的元素也要设置为对应的百分比 最外

    淡淡的烟草味﹌淡淡的烟草味﹌/ 0 赞/ 448 阅读