当前位置：网站首页>Method of realizing horizontal and vertical centering of unknown width and height elements

Method of realizing horizontal and vertical centering of unknown width and height elements

2022-07-19 03:32:00 【Drowned fish u】

1. Set element relative parent positioning position: absolute; left: 50% right: 50%; transform: translate(-50%, -50%)

<style> .f {
       width: 300px; height: 300px; border: 1px solid #87ceeb; position: relative; } .c {
       position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); background-color: #87ceeb; } </style>
<body>
  <div class="f">
    <div class="c"> I want to center vertically </div>
  </div>
<body>

2. Set the parent box to elastic box display: flex; justify-content: center; align-item: center;

Grid layout grid similar display: grid; justify-content: center; align-item: center;

<style> .f {
       width: 300px; height: 300px; border: 1px solid #87ceeb; display: flex; justify-content: center; align-items: center; } .c {
       background-color: #87ceeb; } </style>
<body>
  <div class="f">
    <div class="c"> I want to center vertically </div>
  </div>
<body>
原网站

版权声明
本文为[Drowned fish u]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/200/202207170103342860.html

边栏推荐

猜你喜欢

随机推荐