如何将内容放在屏幕的中心

Question

我正在尝试将我的东西放在屏幕中央的标签中，但它不起作用。

如何使用HTML和CSS将其置于屏幕中心？ 我在哪里 -

代码 -

结果 -

Answer 1

假设你有一个.child元素，你想在.parent元素中居中，你有两个选择：

1）Flexbox - 您可以使用以下css：

.parent {
  display: flex;
  flex-direction: 
  flex-wrap: nowrap;
  justify-content: center;
  align-content: center;
  align-items: center;
}

.child {
  flex: 0 1 auto;
  align-self: auto;
  text-align: center; /*optional*/
}

2）绝对定位：

.parent {
  position:relative;
}

.child{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center; /*optional*/
}

Answer 2

如果您提供了一些已编写的代码会更容易，但如果您想要标记中心，则可以执行以下操作：

<强> CSS ：

#parentTag{
   position: relative;
}

#myTagIWantToBeCentered{
    position: absoulte;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

<强> HTML：

<div id="parentTag">
    <div id="myTagIWantToBeCentered">
       <!--stuff here-->
    </div>
</div>

Answer 3

如果您需要水平和垂直居中内容，请使用：

.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

Answer 4

＆＃13;

＆＃13;

cost[]

＆＃13;

.box_text {
	color: #ffffff;
	font-size: 20px;
	font-weight: bold;
    position: absolute;
    top:50%;
    left:50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
}

.box {
    width: 100px;
    height: 100px;
    background-color: red; 
    margin:3px;
    position: relative;
}

＆＃13;

＆＃13;

＆＃13;

Answer 5

如果您在Bootstrap上运行，则可以轻松添加类 With Me Select Case .ComboBox1T Case "1.New Application" If .TB1 = "" Or .TB2 = "" Or .TB3 = "" Then MsgBox ("Something") Case "2.old Application" If .TB1 = "" Or .TB2 = "" Then MsgBox ("Something") Case "3.Other Application" If ........ Case "4." Case "5." Case "6." Case "7." End Select End With 。通常，（内联）块元素可以用css

为中心

text-center

最好是你可以提供你的代码，以便我们可以根据它提出建议。

Answer 6

有几种方法可以将元素集中在一起：

1）保证金：

.className {margin: 0 auto;}

这样做是将垂直边距设置为0并自动计算水平值 - 从而使元素居中。

2）text-align：

.className {text-align: center;}

如果您的代码看起来有点像这样：

<div class="className">
    <button class="btn">Text</button>
</div>

然后在div上执行文本对齐中心将居中对齐按钮。

请勿使用<center>标签 - 他们已被弃用。

Answer 7

您可以尝试使用CSS Flexbox。如果你添加

.class {
    display: flex;
    align-items: center;     //Aligns the content vertically
    justify-content: center; //Aligns the content horizontally
}

到父html元素。

举个例子，看看这个js-fiddle https://jsfiddle.net/adamturner93/brjotz2y/1/。

Answer 8

如果您不使用HTML5，则可以尝试使用HTML标记。

实施例 -

<element>.<class> {
    margin-left: auto;
    margin-right: auto;
    width: 6em
}

如果您使用的是HTML5，则需要使用css进行修改。

{{1}}