垂直和水平居中圆角矩形内的文本

Question

我希望圆角矩形内的文本居中（垂直和水平），并将此横幅也居中放置在页面上，但不确定如何正确设置。其他元素也需要居中。请建议如何正确制作东西。这是代码：

#wrapper {
  position: relative;
  width: 80%;
  margin: auto;
  text-align: center;
  vertical-align: middle;
}

#rcorners {
  border-radius: 15px;
  border: 6px solid #ffffff;
  padding: 20px;
  width: 450px;
  height: 40px;
}

body {
  background-image: url(images/blaunew.png);
  background-color: #001b33;
  color: #ffffff;
  font-family: 'Roboto';
  font-size: 14px;
}

#rcorners {
  font-family: 'Roboto';
  font-size: 48px;
  font-weight: 700;
  font-style: normal;
  Helvetica,
  sans-serif;
}

p {
  font-family: 'Roboto';
  font-size: 32px;
  Helvetica,
  sans-serif;
}

.main {
  margin-top: 20%;
  //font-size: 35px;       
}

footer {
  font-size: 14px;
}

<head>
  <title>centered construction</title>
  <link href='https://fonts.googleapis.com/css?family=Roboto:400,700' rel='stylesheet' type='text/css'>

</head>

<body>
  <div id="wrapper">
    <div class="main">
      <h1 id="rcorners">Centered Text No1</h1>
      <p>LOREM IPSUM DOLOR </p>
    </div>

    <footer>
      <div>&copy; Lorem Ipsum Dolor </div>
    </footer>
  </div>

Answer 1

从 #rcorners 中删除 width: 450px; 和 height: 40px。

否则，如果您想保持 450px 宽，可以将 margin: auto 添加到 #rcorners。它会解决你的问题。

@import url('https://fonts.googleapis.com/css?family=Roboto:400,700');

#wrapper {
    position: relative;
    width: 80%; 
    margin: auto;
    text-align: center;
    vertical-align: middle;
}

 #rcorners {
    border-radius: 15px;
    border: 6px solid #ffffff;
    padding: 20px; 
    /* width: 450px;
    height: 40px;     */
}
body {
    background-image: url(images/blaunew.png);
    background-color: #001b33;
    color: #ffffff;
    font-family: 'Roboto';font-size: 14px;
}
#rcorners {
    font-family: 'Roboto';font-size:48px;font-weight:700; font-style:normal; Helvetica, sans-serif;
}
p {
    font-family: 'Roboto'; font-size: 32px; Helvetica, sans-serif; 
}

.main { 
   margin-top: 20%;
//font-size: 35px;       
}

footer {
   font-size: 14px;
}

<div id="wrapper">
    <div class="main">
         <h1 id="rcorners">Centered Text No1</h1>
         <p>LOREM IPSUM DOLOR </p>
         </div>

    <footer>
        <div>&copy; Lorem Ipsum Dolor </div>
       </footer>
</div>

Answer 2

要使按钮居中，请添加 margin: 0 auto 并使文本居中，我认为您可以使用 flexbox 轻松地做到这一点。代码将类似于：

#rcorners {
   display: flex;
   align-items: center;
   justify-content: center;
   margin: 0 auto;
}

您可以在此处阅读有关使用 flexbox 居中的更多信息：https://philipwalton.github.io/solved-by-flexbox/demos/vertical-centering/

Answer 3

我已经编辑了你的CSS。但我不明白你为什么在#rcorners 元素上给出高度。希望对您有所帮助

CSS

#wrapper {
    position: relative;
    width: 80%; 
    margin: auto;
    text-align: center;
    vertical-align: middle;
}

 #rcorners {
    border-radius: 15px;
    border: 6px solid #ffffff;
    padding: 20px; 
    width: 450px;
    /*height: 40px; */ /*it is less height for 2 line text*/   
}
body {
    background-image: url(images/blaunew.png);
    background-color: #001b33;
    color: #ffffff;
    font-family: 'Roboto';font-size: 14px;
}
#rcorners {
    font-family: 'Roboto';font-size:48px;font-weight:700; font-style:normal; Helvetica, sans-serif;
}
p {
    font-family: 'Roboto'; font-size: 32px; Helvetica, sans-serif; 
}

.main { 
   margin-top: 20%;
    margin-left: auto;
    margin-right: auto;
    display:  inline-block;
    width: auto;
/*font-size: 35px; */      
}

footer {
   font-size: 14px;
}

垂直和水平居中圆角矩形内的文本

Centering text inside rounded rectangle vertically and horizontally

html

css

center