(1条消息)DIV居中的方法 flex,transform - yumeirener_的博客 - CSDN博客

参考文献 https://github.com/simaQ/cssfun/issues/3

> CSS3，使用flexbox布局

抛开兼容性，不需要考虑宽度和高度值。

<div id="parent">

<div id="item">test</div>

</div>

parent {

display: flex;
width: 400px; /* 宽度值，随便啦 */
height: 400px;  /* 高度值，随便啦 */
background-color: yellow;

}

item {

width: 100px;/* 宽度值，随便啦 */
height: 20px;/* 高度值，随便啦 */
margin: auto;
background-color: red; /* Magic! */

}

> 如何使用transform居中div? 

**https://jingyan.baidu.com/article/3ea51489b053e852e61bbaa1.html
**

上下左右居中

.center {

  left: 50%;

  top: 50%;

  transform: translate(-50%, -50%);

}

单独上下居中或左右居中

上下

.center {

    left: 50%;

    transform: translateX(-50%);

}

Original url: Access
Created at: 2019-11-25 22:25:08
Category: default
Tags: none

未标明原创文章均为采集，版权归作者所有，转载无需和我联系，请注明原出处，南摩阿彌陀佛，知识，不只知道，要得到

请先后发表评论
  • 最新评论
  • 总共0条评论