在父元素上显示文本对齐中心，在子元素上显示内联块。这将居中所有的东西。我相信这叫做“块浮动”。

<div class="outer">
 <div class="inner"> some content </div>
</div><!-- end outer -->

<style>
div.outer{
 width: 100%;
 text-align: center;
}
div.inner{
 display: inline-block;
 text-align: left
}
</style>

这也是一个很好的选择浮动，祝你好运!

这对我很有用。可以定义外部div的宽度和高度。

代码如下:

.outer { 位置:相对; text-align:中心; 宽度:100%; 身高:150 px;//允许任何高度，也在%中。 背景:灰色; ｝ .outer > div:first-child { 位置:绝对的; 上图:50%; 左:50%; 宽度:100%; -webkit-transform (-50%， -50%); -ms-transform: -50%， -50%; 转换:翻译(-50%，-50%); 背景:红色; ｝ < div class = "外" > < div class = "内部" > 把你的文本或div内容放在这里! < / div > < / div >

垂直对齐任何只需3行CSS

HTML

<div class="parent-of-element">

    <div class="element">
        <p>Hello</p>
    </div>

</div>

简单的

.element {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

CSS

.parent-of-element {
   position: relative;
   height: 500px;
   /* or height: 73.61% */
   /* or height: 35vh */
   /* or height: ANY HEIGHT */
}

.element {
  position: absolute;
  top: 50%;

  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
}

根据shouldiprefix，这是你唯一需要的前缀

您还可以使用%作为.parent-of-element的'height'属性的值，只要元素的父元素具有高度或一些扩展其垂直大小的内容。

另一种实现水平和垂直居中的方法是:

.Absolute-Center {
  margin: auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
}

(参考)

试着像这样对齐内部元素:

top: 0;
bottom: 0;
margin: auto;
display: table;

当然还有:

position: absolute;

在这里输入图像描述100%它工作

.div1{
  height: 300px;
  background: red;
  width: 100%;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -ms-flex-align: center;
  -webkit-align-items: center;
  -webkit-box-align: center;
  align-items: center;
}
.div2{
  background: green;
  height: 100px;
  width: 100%;
}

    <div class="div1">
      <div class="div2">
      sdfd
      </div>
    </div>

https://jsfiddle.net/Mangesh1556/btn1mozd/4/