时间戳

首页 > 解决方案 > 将 Div 对齐到中心但保持响应

html - 将 Div 对齐到中心但保持响应

问题描述

我正在制作一个个人作品集网站，我想将包含圆形（在 CSS 中动画）的 div 居中并对齐，同时保持响应。

我试过 flexbox，这是我的代码：

:root {
  --background: #005;
  --primary: #88D5BF;
  --secondary: #5D6BF8;
  --third: #e27fcb;
}

body {
  margin: 0;
  padding: 0;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background: #f00b55;
  display: flex;
  align-items: center;
}

.main-logo {
  width: 90px;
}

h1 {
  color: white;
  font-size: 20vmin;
  line-height: 1;
  font-family: ivypresto-display, serif;
  font-weight: 400;
  font-style: normal;
  padding-left: 40px;
  text-align: center;
}

header {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-left: 50px;
  margin-top: 50px;
}

.blob {
  position: absolute;
  top: 0;
  left: 0;
  background: linear-gradient(45deg, var(--primary) 0%, var(--secondary) 100%);
  animation: morph 8s ease-in-out infinite;
  border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
  height: 500px;
  transition: all 1s ease-in-out;
  width: 500px;
  transform-origin: 50% 50%;
  z-index: -1;
  @keyframes morph {
    0% {
      border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
      background: linear-gradient(45deg, var(--primary) 0%, var(--secondary) 100%);
    }
    50% {
      border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%;
      background: linear-gradient(45deg, var(--third) 0%, var(--secondary) 100%);
    }
    100% {
      border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
      background: linear-gradient(45deg, var(--primary) 0%, var(--secondary) 100%);
    }
  }
}
<!-- Header-->
<header>
  <div class="blob">
  </div>
  <h1>Abbie is a<br>graduate UX/UI designer</h1>
</header>

我在codepen上的例子

标签： htmlcssresponsive-design

解决方案

所以如果我理解正确的话。您想将蓝色斑点居中并在其上放置文本吗？正如约翰已经在答案中写的那样。您需要使用媒体查询更改 blob 的高度和宽度。如果要更改 blob 的位置，只需更改：

    .blob {
      left: 0;  
      right: 20%; <--- more left
    }


:root {
    --background: #005;
    --primary: #88D5BF;
    --secondary: #5D6BF8;
    --third: #e27fcb;
}


body {
  margin: 0;
  padding: 0;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background: #f00b55;
}

h1 {
  color: white;
  font-size: 20vmin;
  line-height: 1;
  font-family: ivypresto-display, serif;
  font-weight: 400;
  font-style: normal;
  padding-left: 40px;
  text-align: center;
}

header{
  display: flex;
  justify-content: center;
  align-items: center;
  margin-left: 50px;
  margin-top: 50px;
}

.blob {
  position: absolute;
  margin-left: auto;
  margin-right: auto;
  left: 0;
  right: 20%;
  text-align: center;
  background: linear-gradient(45deg, var(--primary) 0%, var(--secondary) 100%);
  animation: morph 8s ease-in-out infinite;
  border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
  height: 500px;
  transition: all 1s ease-in-out;
  width: 500px;
  transform-origin: 50% 50%;
  z-index: -1;
  
  

@keyframes morph {
    0% {
              border-radius:  60% 40% 30% 70% / 60% 30% 70% 40%;
              background: linear-gradient(45deg, var(--primary) 0%, var(--secondary) 100%);
      } 
      
      50% {
              border-radius:  30% 60% 70% 40% / 50% 60% 30% 60%;
              background: linear-gradient(45deg, var(--third) 0%, var(--secondary) 100%);
      }
    
      100% {
          border-radius:  60% 40% 30% 70% / 60% 30% 70% 40%;
          background: linear-gradient(45deg, var(--primary) 0%, var(--secondary) 100%);
      } 
  }

}
    <!-- Header-->
    <header>
      <div class="blob">
          </div>
          <h1>Abbie is a<br>graduate UX/UI designer</h1>
        </header>

推荐阅读