美文网首页
css基础(4)----水平居中和垂直居中

css基础(4)----水平居中和垂直居中

作者: Coding破耳 | 来源:发表于2018-11-21 23:37 被阅读0次
<div class="parent">
  <div class="child">
  hehehe
  </div>
</div>

1.水平居中

a.子元素是内联元素时,对父元素设置text-align为center。示例

.parent{
  border: 1px solid blue;
  margin: 0 auto;
  text-align:center;
}
子元素是固定宽度对div时,设置左右margin为一样对

b.利用绝对定位,设置子元素偏移量为剩下宽度的一半。示例

.parent{
  border: 1px solid blue;
  position:relative;
  height:100px;
}
.child{
  position:absolute;
  border: 1px solid red;
  left:50%;
  transform:translateX(-50%); 
}

2.垂直居中

a.子元素的上下margin设置为相同。示例

.parent{
  border:1px solid green;
}
.child{
  border:1px solid red;
  margin: 10px 0;
}

b.绝对定位,设置子元素的top为50%,transform:translateY(-50%)。示例

.parent{
  border:1px solid green;
  position:relative;  
  height:100px;
}

.child{
  border:1px solid red;
  position:absolute;
  top:50%;
  transform:translateY(-50%);
}

相关文章

  • css 居中

    居中有水平居中和垂直居中。 水平居中+垂直居中 flex法 position法 就是计算呗~ 参考 CSS各种居中...

  • css基础(4)----水平居中和垂直居中

    1.水平居中 a.子元素是内联元素时,对父元素设置text-align为center。示例 b.利用绝对定位,设置...

  • css 图片居中

    css图片居中(水平居中和垂直居中) css图片水平居中 块状元素直接用text-align:center, di...

  • CSS - 垂直水平居中方法

    前言 总括:整理 css 垂直水平居中方法,区分内联元素与块级元素 CSS垂直居中和水平居中 用css让一个容器水...

  • CSS图片居中(水平居中和垂直居中)

    css图片水平居中 css图片垂直居中 css图片水平垂直居中

  • CSS居中完全指南——构建CSS居中决策树

    CSS居中完全指南——构建CSS居中决策树 本文总结CSS居中,包括水平居中和垂直居中.本文相当于CSS决策树,下...

  • CSS居中小结

    CSS居中总结 最近在学习CSS居中,居中里面又包含水平居中和垂直居中,分不太清内联元素(inline or in...

  • css水平居中和水平垂直居中

    水平居中和水平垂直居中demo

  • 常用的居中方法

    本文将介绍的居中方法有 ,水平居中,垂直居中和水平垂直居中。 一水平居中 二水平垂直居中

  • 定位和居中问题

    CSS的居中分水平居中和垂直居中,如果要让元素水平、垂直同时据中,不同情况下有不同的方法 分类: 居中元素大小是固...

网友评论

      本文标题:css基础(4)----水平居中和垂直居中

      本文链接:https://www.haomeiwen.com/subject/pcohqqtx.html