CSS——如何垂直居中一个浮动元素 or img图片

最新推荐文章于 2024-04-09 16:57:43 发布

Bonsoir777

最新推荐文章于 2024-04-09 16:57:43 发布

阅读量963

点赞数

分类专栏： css/css3 文章标签： css html css3 前端

本文链接：https://blog.csdn.net/Bonsoir777/article/details/125665716

版权

css/css3 专栏收录该内容

32 篇文章 2 订阅

订阅专栏

文章目录

前言
一、如何垂直居中一个浮动元素
二、如何垂直居中img图片
总结

前言

本文主要介绍如何利用css垂直居中一个浮动元素 or img图片

一、如何垂直居中一个浮动元素

如下图，如何使用css垂直居中绿色盒子呢，又有几种解决办法呢？

HTML结构及CSS样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .father{
            width: 200px;
            height: 200px;
            border: 1px solid black;
        }
        .child{
           background-color: #bfa;
           height: 100px;
           width: 100px;
        }
        
    </style>
</head>
<body>
    <div class="father">
      <div class="child"></div>
    </div>
</body>
</html>

1.1、解决方法

方法一：

.child{

      height: 100px;

       position: absolute;//父元素相对定位

       top:50%;

       left:50%;

       transform: translate(-50%,-50%);

}

方法二：

.child{

       width: 100px;

       height: 100px;

       position: absolute;

       top:50%;

       left:50%;

       margin-top: -50px;

       margin-left: -50px;

}

方法三：

.child {

       width: 100px;

       height: 100px;

       position: absolute;

       top: 0;

       left: 0;

       right: 0;

       bottom: 0;

       margin: auto

}

二、如何垂直居中一个img

如何利用CSS使下图垂直居中呢？

HTML结构与CSS样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .father{
            width: 200px;
            height: 200px;
            border: 1px solid black;
        }
       
        
    </style>
</head>
<body>
    <div class="father">
      <img src="./image/3.png" alt="">
    </div>
</body>
</html>