当前位置： 文江博客话题详情

使用 CSS 将图形置于其父元素的中心

发布于 2025-01-14 06:22:28 字数 3499 浏览 2 评论 0原文

尝试将 figure 居中，即 .c-yellow 、 .c-blue 但它没有垂直居中。我需要水平和垂直居中：

*,
*:before,
*:after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.clearfix::after {
  clear: both;
  content: "";
  display: table;
}

.container {
  width: 500px;
  height: 500px;
  margin: auto;
  margin-top: 80px;
  cursor: pointer;
  /* border: 1px solid black; */
}

.container-row1,
.container-row3 {
  width: 100%;
  height: 40%;
}

.row1-col1,
.row1-col3,
.row3-col1,
.row3-col3 {
  height: 100%;
  width: 40%;
}


}
.row1-col1,
.row1-col2,
.row1-col3,
.row2-col1,
.row2-col2,
.row2-col3,
.row3-col1,
.row3-col2,
.row3-col3 {
  float: left;
}
.row1-col1,
.row1-col3,
.row3-col1,
.row3-col3 {
  display: flex;
  justify-content: center;
  align-items: center;
}
.row1-col1-child,
.row1-col3-child,
.row3-col1-child,
.row3-col3-child {
  width: 70%;
  height: 70%;
}
.row1-col1-child>div,
.row1-col3-child>div,
.row3-col1-child>div,
.row3-col3-child>div {
  width: 35%;
  height: 35%;
  float: left;
  margin: 7.5%;
  /* box-shadow: -2px 14px 28px rgba(0, 0, 0, 0.25), -2px 10px 10px rgba(0, 0, 0, 0.22); */
  
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
  transition: all 0.3s cubic-bezier(.25, .8, .25, 1);
}
.row1-col1-child>div:hover,
.row1-col3-child>div:hover,
.row3-col1-child>div:hover,
.row3-col3-child>div:hover {
  box-shadow: -2px 14px 28px rgba(0, 0, 0, 0.25), -2px 10px 10px rgba(0, 0, 0, 0.22);
}
.row1-col2>div,
.row3-col2>div {
  width: 33.333%;
  height: 16.667%;
  float: left;
  border: 1px solid black;
}
.yellow {
  background-color: #f6c700;
}
.white {
  background-color: #fff;
}
.card {
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
  transition: all 0.3s cubic-bezier(.25, .8, .25, 1);
}
.card:hover {
  box-shadow: 0 19px 38px rgba(0, 0, 0, 0.30), 0 15px 12px rgba(0, 0, 0, 0.22);
}
.c-yellow {
  margin: auto;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 50%;
  height: 90%;
  width: 90%;
  border-radius: 50%;
  height: 90%;
  width: 90%;
  background: rgb(246, 243, 0);
  background: radial-gradient(circle, rgba(246, 243, 0, 1) 5%, rgba(246, 243, 0, 1) 100%);
  box-shadow: 1px 1px #888888;
}
.c-blue {
  margin: auto;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 50%;
  height: 90%;
  width: 90%;
  border-radius: 50%;
  height: 90%;
  width: 90%;
  background: rgb(0, 243, 243);
  background: radial-gradient(circle, rgba(0, 243, 243, 1) 5%, rgba(0, 243, 243, 1) 100%);
  box-shadow: 1px 1px #888888;
}
<!DOCTYPE html>
<html>

<body>
  <div class="container card">

    <!-- First row -->
    <div class="container-row1 clearfix">

      <div class="row1-col3">
        <div class="row1-col3-child clearfix white">
          <div class="yellow">
            <figure class="c-yellow">
              <figure class="c-blue"></figure>
            </figure>
          </div>

        </div>
      </div>
    </div>

  </div>


</body>

</html>

尝试将 figure 居中，即 .c-yellow 、 .c-blue 但它没有垂直居中。我需要水平和垂直居中。

尝试将 figure 居中，即 .c-yellow 、 .c-blue 但它没有垂直居中。我需要水平和垂直居中：

原文

Trying to center the figure i.e .c-yellow , .c-blue but it didn't got center vertically. I need to center horizontally and vertically both:

*,
*:before,
*:after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.clearfix::after {
  clear: both;
  content: "";
  display: table;
}

.container {
  width: 500px;
  height: 500px;
  margin: auto;
  margin-top: 80px;
  cursor: pointer;
  /* border: 1px solid black; */
}

.container-row1,
.container-row3 {
  width: 100%;
  height: 40%;
}

.row1-col1,
.row1-col3,
.row3-col1,
.row3-col3 {
  height: 100%;
  width: 40%;
}


}
.row1-col1,
.row1-col2,
.row1-col3,
.row2-col1,
.row2-col2,
.row2-col3,
.row3-col1,
.row3-col2,
.row3-col3 {
  float: left;
}
.row1-col1,
.row1-col3,
.row3-col1,
.row3-col3 {
  display: flex;
  justify-content: center;
  align-items: center;
}
.row1-col1-child,
.row1-col3-child,
.row3-col1-child,
.row3-col3-child {
  width: 70%;
  height: 70%;
}
.row1-col1-child>div,
.row1-col3-child>div,
.row3-col1-child>div,
.row3-col3-child>div {
  width: 35%;
  height: 35%;
  float: left;
  margin: 7.5%;
  /* box-shadow: -2px 14px 28px rgba(0, 0, 0, 0.25), -2px 10px 10px rgba(0, 0, 0, 0.22); */
  
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
  transition: all 0.3s cubic-bezier(.25, .8, .25, 1);
}
.row1-col1-child>div:hover,
.row1-col3-child>div:hover,
.row3-col1-child>div:hover,
.row3-col3-child>div:hover {
  box-shadow: -2px 14px 28px rgba(0, 0, 0, 0.25), -2px 10px 10px rgba(0, 0, 0, 0.22);
}
.row1-col2>div,
.row3-col2>div {
  width: 33.333%;
  height: 16.667%;
  float: left;
  border: 1px solid black;
}
.yellow {
  background-color: #f6c700;
}
.white {
  background-color: #fff;
}
.card {
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
  transition: all 0.3s cubic-bezier(.25, .8, .25, 1);
}
.card:hover {
  box-shadow: 0 19px 38px rgba(0, 0, 0, 0.30), 0 15px 12px rgba(0, 0, 0, 0.22);
}
.c-yellow {
  margin: auto;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 50%;
  height: 90%;
  width: 90%;
  border-radius: 50%;
  height: 90%;
  width: 90%;
  background: rgb(246, 243, 0);
  background: radial-gradient(circle, rgba(246, 243, 0, 1) 5%, rgba(246, 243, 0, 1) 100%);
  box-shadow: 1px 1px #888888;
}
.c-blue {
  margin: auto;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 50%;
  height: 90%;
  width: 90%;
  border-radius: 50%;
  height: 90%;
  width: 90%;
  background: rgb(0, 243, 243);
  background: radial-gradient(circle, rgba(0, 243, 243, 1) 5%, rgba(0, 243, 243, 1) 100%);
  box-shadow: 1px 1px #888888;
}
<!DOCTYPE html>
<html>

<body>
  <div class="container card">

    <!-- First row -->
    <div class="container-row1 clearfix">

      <div class="row1-col3">
        <div class="row1-col3-child clearfix white">
          <div class="yellow">
            <figure class="c-yellow">
              <figure class="c-blue"></figure>
            </figure>
          </div>

        </div>
      </div>
    </div>

  </div>


</body>

</html>

Trying to center the figure i.e .c-yellow , .c-blue but it didn't got center vertically. I need to center horizontally and vertically both.

Trying to center the figure i.e .c-yellow , .c-blue but it didn't got center vertically. I need to center horizontally and vertically both:

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（2）

川水往事 2025-01-21 06:22:28

请使用下面的代码垂直和水平居中

.yellow {
    display: flex;
    align-items: end;
    justify-content: center;
}
.c-yellow {
    display: flex;
    align-items: center;
}

please use the below code to center vertically and horizontally

.yellow {
    display: flex;
    align-items: end;
    justify-content: center;
}
.c-yellow {
    display: flex;
    align-items: center;
}
回复 原文
浪荡不羁 2025-01-21 06:22:28

我添加到 .card、.row1-col1-child、.row1-col3-child、.row3-col1-child、.row3-col3-child、.container-row1,.container-row3 类

display: flex;
align-items: center;
justify-content:center;

css:

<style>
        *,
        *:before,
        *:after {
          box-sizing: border-box;
          margin: 0;
          padding: 0;
        }
    
        .clearfix::after {
          clear: both;
          content: "";
          display: table;
        }
    
        .container {
          width: 500px;
          height: 500px;
          margin: auto;
          margin-top: 80px;
          cursor: pointer;
          /* border: 1px solid black; */
        }
    
        .container-row1,
        .container-row3 {
          width: 100%;
          height: 40%;
          display: flex;
          align-items: center;
          justify-content: center;
        }
    
        .row1-col1,
        .row1-col3,
        .row3-col1,
        .row3-col3 {
          height: 100%;
          width: 40%;
        }
    
    
        .row1-col1,
        .row1-col2,
        .row1-col3,
        .row2-col1,
        .row2-col2,
        .row2-col3,
        .row3-col1,
        .row3-col2,
        .row3-col3 {
          float: left;
        }
        .row1-col1,
        .row1-col3,
        .row3-col1,
        .row3-col3 {
          display: flex;
          justify-content: center;
          align-items: center;
        }
        .row1-col1-child,
        .row1-col3-child,
        .row3-col1-child,
        .row3-col3-child {
          width: 70%;
          height: 70%;
          display: flex;
          align-items: center;
          justify-content: center;
        }
        .row1-col1-child>div,
        .row1-col3-child>div,
        .row3-col1-child>div,
        .row3-col3-child>div {
          width: 35%;
          height: 35%;
          float: left;
          margin: 7.5%;
          /* box-shadow: -2px 14px 28px rgba(0, 0, 0, 0.25), -2px 10px 10px rgba(0, 0, 0, 0.22); */
          
          box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
          transition: all 0.3s cubic-bezier(.25, .8, .25, 1);
        }
        .row1-col1-child>div:hover,
        .row1-col3-child>div:hover,
        .row3-col1-child>div:hover,
        .row3-col3-child>div:hover {
          box-shadow: -2px 14px 28px rgba(0, 0, 0, 0.25), -2px 10px 10px rgba(0, 0, 0, 0.22);
        }
        .row1-col2>div,
        .row3-col2>div {
          width: 33.333%;
          height: 16.667%;
          float: left;
          border: 1px solid black;
        }
        .yellow {
          background-color: #f6c700;
        }
        .white {
          background-color: #fff;
        }
        .card {
          box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
          transition: all 0.3s cubic-bezier(.25, .8, .25, 1);
          display: flex;
          align-items: center;
          justify-content: center;
        }
        .card:hover {
          box-shadow: 0 19px 38px rgba(0, 0, 0, 0.30), 0 15px 12px rgba(0, 0, 0, 0.22);
        }
        .c-yellow {
          margin: auto;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          border-radius: 50%;
          height: 90%;
          width: 90%;
          border-radius: 50%;
          height: 90%;
          width: 90%;
          background: rgb(246, 243, 0);
          background: radial-gradient(circle, rgba(246, 243, 0, 1) 5%, rgba(246, 243, 0, 1) 100%);
          box-shadow: 1px 1px #888888;
        }
        .c-blue {
          margin: auto;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          border-radius: 50%;
          height: 90%;
          width: 90%;
          border-radius: 50%;
          height: 90%;
          width: 90%;
          background: rgb(0, 243, 243);
          background: radial-gradient(circle, rgba(0, 243, 243, 1) 5%, rgba(0, 243, 243, 1) 100%);
          box-shadow: 1px 1px #888888;
        }
      </style>

I added to .card, .row1-col1-child,.row1-col3-child,.row3-col1-child,.row3-col3-child,.container-row1,.container-row3 classes

display: flex;
align-items: center;
justify-content:center;

css:

<style>
        *,
        *:before,
        *:after {
          box-sizing: border-box;
          margin: 0;
          padding: 0;
        }
    
        .clearfix::after {
          clear: both;
          content: "";
          display: table;
        }
    
        .container {
          width: 500px;
          height: 500px;
          margin: auto;
          margin-top: 80px;
          cursor: pointer;
          /* border: 1px solid black; */
        }
    
        .container-row1,
        .container-row3 {
          width: 100%;
          height: 40%;
          display: flex;
          align-items: center;
          justify-content: center;
        }
    
        .row1-col1,
        .row1-col3,
        .row3-col1,
        .row3-col3 {
          height: 100%;
          width: 40%;
        }
    
    
        .row1-col1,
        .row1-col2,
        .row1-col3,
        .row2-col1,
        .row2-col2,
        .row2-col3,
        .row3-col1,
        .row3-col2,
        .row3-col3 {
          float: left;
        }
        .row1-col1,
        .row1-col3,
        .row3-col1,
        .row3-col3 {
          display: flex;
          justify-content: center;
          align-items: center;
        }
        .row1-col1-child,
        .row1-col3-child,
        .row3-col1-child,
        .row3-col3-child {
          width: 70%;
          height: 70%;
          display: flex;
          align-items: center;
          justify-content: center;
        }
        .row1-col1-child>div,
        .row1-col3-child>div,
        .row3-col1-child>div,
        .row3-col3-child>div {
          width: 35%;
          height: 35%;
          float: left;
          margin: 7.5%;
          /* box-shadow: -2px 14px 28px rgba(0, 0, 0, 0.25), -2px 10px 10px rgba(0, 0, 0, 0.22); */
          
          box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
          transition: all 0.3s cubic-bezier(.25, .8, .25, 1);
        }
        .row1-col1-child>div:hover,
        .row1-col3-child>div:hover,
        .row3-col1-child>div:hover,
        .row3-col3-child>div:hover {
          box-shadow: -2px 14px 28px rgba(0, 0, 0, 0.25), -2px 10px 10px rgba(0, 0, 0, 0.22);
        }
        .row1-col2>div,
        .row3-col2>div {
          width: 33.333%;
          height: 16.667%;
          float: left;
          border: 1px solid black;
        }
        .yellow {
          background-color: #f6c700;
        }
        .white {
          background-color: #fff;
        }
        .card {
          box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
          transition: all 0.3s cubic-bezier(.25, .8, .25, 1);
          display: flex;
          align-items: center;
          justify-content: center;
        }
        .card:hover {
          box-shadow: 0 19px 38px rgba(0, 0, 0, 0.30), 0 15px 12px rgba(0, 0, 0, 0.22);
        }
        .c-yellow {
          margin: auto;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          border-radius: 50%;
          height: 90%;
          width: 90%;
          border-radius: 50%;
          height: 90%;
          width: 90%;
          background: rgb(246, 243, 0);
          background: radial-gradient(circle, rgba(246, 243, 0, 1) 5%, rgba(246, 243, 0, 1) 100%);
          box-shadow: 1px 1px #888888;
        }
        .c-blue {
          margin: auto;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          border-radius: 50%;
          height: 90%;
          width: 90%;
          border-radius: 50%;
          height: 90%;
          width: 90%;
          background: rgb(0, 243, 243);
          background: radial-gradient(circle, rgba(0, 243, 243, 1) 5%, rgba(0, 243, 243, 1) 100%);
          box-shadow: 1px 1px #888888;
        }
      </style>
回复 原文
~没有更多了~

关于作者

丑丑阿

暂无简介

文章
评论
25 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

明月

文章 0 评论 0

守不住的情

文章 0 评论 0

悲念泪

文章 0 评论 0

墨洒年华

文章 0 评论 0

花桑

文章 0 评论 0

浅听莫相离

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文