如何让一个子元素div块元素上下左右居中

如何让一个子元素div块元素上下左右居中(以下总结方法,都已得到验证)。

情景一:一个浏览器页面中,只有一个div模块,让其上下左右居中

      解决方案:  { position:fixed;

              left:0;

             right:0;

             top:0;

             bottom:0;

             margin:auto; }

      备注:此处小编使用position:fixed为最佳方案,因为position:fixed定位是相对于整个浏览器页面的。

情景二:一个父元素div,一个已知宽度、高度的子元素div(200*300)

      解决方案: 1、position布局

             {

              position:absolute/fixed;

              top:50%;

              left:50%;

              margin-left:-100px;

              margin-top:-150px;

              }

情景三:一个父元素div,一个未知宽度、高度的子元素div

解决方案: 1、position布局,position设为absolute,其他同情景一

            2、display:table

            父级元素:{ display:table;}

            子级元素: { display:table-cell;vertical-align:middle }

            3、flex布局

            父级元素:{ display:flex;flex-direction:row;justify-content:center;align-items:center;}

            子级元素:{flex:1}

4、translate

position: absolute;

top: 50%;

left: 50%;

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

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

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

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

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

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • display:设置元素的显示方式 display:block(块级元素) 默认为父元素宽高,可设置宽高相对前序换...
    bluishwhiteC阅读 669评论 0 0
  • 各种纯css图标 CSS3可以实现很多漂亮的图形,我收集了32种图形,在下面列出。直接用CSS3画出这些图形,要比...
    剑残阅读 9,688评论 0 8
  • 方法一(varticle-align) 理念 利用表格单元格的居中属性。 步骤 父div外层配置一个div,同时设...
    强哥科技兴阅读 1,074评论 0 0
  • CSS 是什么 css(Cascading Style Sheets),层叠样式表,选择器{属性:值;属性:值}h...
    崔敏嫣阅读 1,509评论 0 5
  • 我说我讨厌“玩”,并不是我讨厌“玩”这个动作或者行为,而是“玩”这个词。 在学校时,当我问同学,星期天他在家里都做...
    kenanlian阅读 521评论 8 5