使用 CSS 更智能地居中 div [重复]

Posted

技术标签:

【中文标题】使用 CSS 更智能地居中 div [重复]【英文标题】：Center a div more intelligently with CSS [duplicate] 【发布时间】：2018-01-17 14:43:39 【问题描述】：

我正在使用以下代码使对象居中：

.object 
  width: 70%;
  height: 70%;
  position: absolute;
  top: 50%;
  left:50%;

  /* these are the lines to which I will refer */
  margin-top: -350px;
  margin-left: -350px;

我使用顶部和左侧边距来减去对象大小的一半，但该大小以百分比形式给出。所以我的问题是有一种方法可以分配这些边距，这样我就不必每次更改框大小时都手动更改它们？

【问题讨论】：

你可以在 margin-top 和 margin-left 中使用 %，你可以看到它在这里工作。 w3schools.com/cs-s-ref/… 您可以编写一些 jQuery 来为您计算这些金额。 【参考方案1】：

对我来说，最好的选择是使用transform:translate 属性。

 .object 
    position: absolute;
    top: 50%;
    left: 50%;

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

不再需要计算width/2 和height/2 边距。

如果您使用的是SASS，这里有一个神奇的@mixin 可以使用：

@mixin transform($transforms) 
   -moz-transform: $transforms;
   -o-transform: $transforms;
   -ms-transform: $transforms;
   -webkit-transform: $transforms;
   transform: $transforms;


@mixin center($position: "both") 
  position: absolute;

  @if $position == "vertical" 
    top: 50%;
    @include transform(translateY(-50%));
  

  @if $position == "horizontal" 
    left: 50%;
    @include transform(translateX(-50%));
  

  @if $position == "both" 
    top: 50%;
    left: 50%;
    @include transform(translate(-50%, -50%));

然后，只需使用 

.object 
   // both vertical and horizontal
   @include center;

   // only vertical
   @include center(vertical);

   // only horizontal
   @include center(horizontal);

【讨论】：

感谢 mixin，绝对是在偷这个。 不客气。把它当作礼物:)【参考方案2】：

许多方法之一 - 使用 transform 属性使元素居中 - 请参阅下面的演示：

.object 
  width: 70%;
  height: 70%;
  position: absolute;
  top: 50%;
  left:50%;
  border: 1px solid red;
  transform:translate(-50%, -50%);

<div class="object">Two</div>

【讨论】：

【参考方案3】：

你应该使用 flex。

html

<body>
    <div class="square"></div>
</body>

CSS

body
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;

.square
  width: 200px;
  height: 200px;
  background-color: red;

【讨论】：

是的..这只是错误..我修复了。 我会展示一个链接浏览器对 FlexBox 的支持。并非所有浏览器都接受它，它可能会误导一些在网站中实现它的用户，认为它可以在任何地方工作，并让许多使用不受支持的浏览器的用户破坏它。【参考方案4】： 

.main_div
  width:200px;
  height:200px;
  border:thin black solid;
  position:relative;


.main_div .object 
  width: 70%;
  height: 70%;
  position: absolute;
  transform:translate(-50%, -50%);
  top: 50%;
  left:50%;
  border: thin red solid;
  

<div class="main_div">
  <div class="object">Object Div Text</div>
</div>

希望这会有所帮助。

【讨论】：

【参考方案5】：

为什么不使用margin: 0 auto？

.object 
  width: 70%;
  height: 70%;
  position: absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  margin:0 auto;

https://jsfiddle.net/p9hy06tg/4/

【讨论】：

以上是关于使用 CSS 更智能地居中 div [重复]的主要内容，如果未能解决你的问题，请参考以下文章

CSS Flexbox - 在两个 div 之间居中一个 div [重复]

如何使用 CSS 使 1 个 div 居中对齐和其他浮动正确 [重复]

仅使用css在div中垂直居中图像[重复]

在方形（flex）div中垂直居中文本[重复]

CSS垂直和水平居中的Div [重复]

在另一个 div 中垂直居中一个 div [重复]