css使用定位实现子元素在父元素水平垂直居中

先看效果:
css使用定位实现子元素在父元素水平垂直居中_第1张图片

假设元素结构为
css使用定位实现子元素在父元素水平垂直居中_第2张图片
父元素尺寸300×300,子元素尺寸100×100,如下图。
现在,要使子元素在父元素内水平垂直居中。
css使用定位实现子元素在父元素水平垂直居中_第3张图片

具体做法如下:

1、父元素使用相对定位,为的是保证使其子元素定位的参考系是父元素。
css使用定位实现子元素在父元素水平垂直居中_第4张图片

2、子元素使用绝对定位。设置top、right、bottom、left均为0,margin设置为auto
css使用定位实现子元素在父元素水平垂直居中_第5张图片
3.完成,看效果
css使用定位实现子元素在父元素水平垂直居中_第6张图片
完整代码:


<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <style>
        .parent{
      
            width: 300px;
            height: 300px;
            background-color: red;

            position: relative;
        }
        .son{
      
            width: 100px;
            height: 100px;
            background-color: blue;

            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            margin: auto;
        
        }
    style>
head>
<body>
    <div class="parent">
        <div class="son">div>
    div>
body>
html>

你可能感兴趣的:(web前端,css,html)