CSS div中心,无宽度

时间:2018-06-27 16:29:52

标签: html css

我正在寻找一种方法来使div在体内居中,即没有定义尺寸的div?

任何帮助都会很棒。 Example

3 个答案:

答案 0 :(得分:2)

通过合并边距和翻译:

首先,使用margin-top: 50%;在div上方创建50%的页面高度空间。现在,div 开始在页面中间。

但是那太远了,您不知道高度,如何纠正?通过使用翻译。 保证金是指父对象(在这种情况下为主体),翻译是指对象的大小(#example

#example{
    margin-top: 50%;
    transform: translateY(-50%);
    /* And now you figure out how to use the same trick on the X-axis */
}

一些演示值可以使它变得更加明显:

document height     Element height  ->  50% margin in px    -50% translate in px    
 800px                  250px       ->      400px               -125px
 800px                  150px       ->      400px               - 75px
1000px                  150px       ->      500px               - 75px

此方法的好处:当您添加任何值填充时,以及以后决定设置一些固定值时,它都可以正常工作。

答案 1 :(得分:1)

解决这个问题的方法很少。

解决方案1 ​​

position: absolutetransform: translate

.parent {
  position: relative;
  height: 500px;
  width: 500px;
  background: green;
}

.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: red;
}
<div class="parent">
  <div class="child">
    Content
  </div>
</div>

解决方案2

display: flex; align-items: center; justify-content: center;(父级)。

.parent {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 500px;
  width: 500px;
  background: green;
}

.child {
  background: red;
}
<div class="parent">
  <div class="child">
    Content
  </div>
</div>

答案 2 :(得分:0)

使用Flexbox。

Flexbox允许使用父元素上的align-items属性,使元素垂直对齐,而不管元素的大小如何。 justify-content使水平居中变得容易。

有关flexbox的所有内容的良好指南在这里:https://css-tricks.com/snippets/css/a-guide-to-flexbox/

在这里查看我的示例:http://jsfiddle.net/srn4opqL/或:

HTML:

<div class="flex-container">
  <div class="greenbox">Some arbitrary content<br> that will set the dimensions of the div</div>
</div>

CSS:

.flex-container{
  width: 100%;
  height: 100vh;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.greenbox {
  background: limegreen;
  text-align: center;
 padding: 2em;
}

关于供应商前缀。我在以下位置使用了该工具:https://autoprefixer.github.io/设置为“最后3个版本”。