屏幕中心的Center Div

Posted 2023-03-05

【中文标题】屏幕中心的Center Div

【英文标题】：Center Div in Center of Screen

【发布时间】：2016-04-21 00:45:24

【问题描述】：

我知道这里和网络上已经问过很多次了，但我遇到了困难。

我的 html 文档中有一个 div 容器。只是一个有背景和 div 的 body。

我正在制作一个“即将推出”页面。 我想将容器 div 居中到屏幕的中心，这样它就可以在移动设备、桌面设备和任何分辨率上工作。

我正在尝试不同的代码布局，但我无法做到正确。

我该怎么做？

链接到我的代码：https://jsbin.com/puyege/edit?html,output

@import url(http://fonts.googleapis.com/earlyaccess/alefhebrew.css);

 body 
  margin: 0 !important;
  background: url("http://lbscience.org/wp-content/uploads/2016/01/Horsehead-Nebula.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;


#container 
  background-color: green !important;
  font-family: 'Alef Hebrew', sans-serif;
  position: fixed;
  top: 50%;
  -webkit-transform: translate(0, -50%);
  -ms-transform: translate(0, -50%);
  transform: translate(0, -50%);
  text-align: center;


.bold 
  font-weight: bold;


#quote 
  font-size: 2em;

<div id="container">
  <p class="bold">"אי-שם, משהו מחכה להתגלות"
    <p>
      <p>קארל סייגן-</p>
      <img  id="logo" src="http://lbscience.org/wp-content/uploads/2015/10/LittleBig-Science-Old-Logo-300x90.png" />
      <p>בקרוב</p>
</div>

【参考方案1】：

您需要在#container 上设置left: 50%，然后调整您的transform 以解决此问题。你也没有正确关闭<p class="bold">：

@import url(http://fonts.googleapis.com/earlyaccess/alefhebrew.css);
 body 
  margin: 0 !important;
  background: url("http://lbscience.org/wp-content/uploads/2016/01/Horsehead-Nebula.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;

#container 
  background-color: green !important;
  font-family: 'Alef Hebrew', sans-serif;
  position: fixed;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;

.bold 
  font-weight: bold;

#quote 
  font-size: 2em;

<div id="container">
  <p class="bold">"אי-שם, משהו מחכה להתגלות"</p>
  <p>קארל סייגן-</p>
  <img  id="logo" src="http://lbscience.org/wp-content/uploads/2015/10/LittleBig-Science-Old-Logo-300x90.png" />
  <p>בקרוב</p>
</div>