【html+css+js】实例自习笔记–前端基础知识–绝对定位的盒子水平居中

【html+css+js】实例自习笔记–前端基础知识–绝对定位的盒子水平居中

【CSS面试题】绝对定位的盒子水平居中

问题:

代码如图

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
head>
<style>
    .box {
        position: absolute;
        width: 100px;
        height: 100px;
        background-color: pink;
        /* 加了绝对定位的盒子不能通过margin:0 auto; 进行水平居中 */
        margin: 0 auto;
    }
style>

<body>
    <div class="box">div>
body>
html>

【html+css+js】实例自习笔记–前端基础知识–绝对定位的盒子水平居中_第1张图片

解决办法

1.水平居中

  • left:50%:让盒子的左侧移动到父级盒子的水平中心位置(即走父容器的一半)
  • margin-left:-(盒子本身宽度的一半):让盒子向左移动盒子宽度的一半
DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
head>
<style>
    .box {
        position: absolute;
        width: 100px;
        height: 100px;
        background-color: pink;
        /* 加了绝对定位的盒子不能通过margin:0 auto; 进行水平居中 */
        /* margin: 0 auto; */
        left: 50%;
        margin-left: -100px;
       }
style>

<body>
    <div class="box">div>
body>
html>

【html+css+js】实例自习笔记–前端基础知识–绝对定位的盒子水平居中_第2张图片

2.垂直居中

  • top:50%:让盒子的上边移动到父级盒子的垂直中心位置(即走父容器的一半)
  • margin-top:-(盒子本身高度的一半):让盒子向上移动盒子高度的一半
DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
head>
<style>
    .box {
        position: absolute;
        width: 100px;
        height: 100px;
        background-color: pink;
        /* 加了绝对定位的盒子不能通过margin:0 auto; 进行水平居中 */
        /* margin: 0 auto; */
        /* 水平居中 */
        left: 50%;
        margin-left: -100px;
        /* 垂直居中 */
        top: 50%;
        margin-top: -100px;
       }
style>

<body>
    <div class="box">div>
body>
html>

【html+css+js】实例自习笔记–前端基础知识–绝对定位的盒子水平居中_第3张图片

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