css实现垂直水平居中的几种方法

最新推荐文章于 2023-09-30 13:11:25 发布
最新推荐文章于 2023-09-30 13:11:25 发布
阅读量53 收藏
点赞数
原文链接：http://www.cnblogs.com/xingguozhiming/p/8847632.html
版权

直接上代码，只需切换class就可看效果

<!DOCTYPE html>
<html>
<head>
    <title>水平垂直居中</title>
    <style type="text/css">
    *{
        margin: 0;
        padding: 0;
    }
        .myDiv{
            width:200px;
            height: 200px;
            background: lightblue;
        }
        /*方法一*/
        .divToCenter1{
            
            position: absolute;
            top:0;
            left: 0;
            bottom: 0;
            right: 0;
            margin: auto;
        }
        /*方法二*/
        .divToCenter2{
            position:absolute;
            top:50%;
            left:50%;
            margin:-100px;
        }
        /*方法三*/
        .divToCenter3{
            position: absolute;
            top: 50%;
            left:50%;
            transform: translate(-50%,-50%);
        }


    </style>
</head>
<body>
    <div  class="myDiv divToCenter3">
        
    </div>

</body>
</html>

运行结果：

相对父组件（div）水平垂直居中

效果如下：

<!DOCTYPE html>
<html>
<head>
    <title>水平垂直居中</title>
    <style type="text/css">
    *{
        margin: 0;
        padding: 0;
    }
        .myDiv{
            width:200px;
            height: 200px;
            background: lightblue;
        }
    
        /*方法四*/
        .divToCenter4{

            display: flex;
            justify-content: center;
            align-items: center;
        }
        .myDiv .box1{
            width:20px;
            height: 20px;
            background: red;
            
        }
        /*方法五*/
        .divToCenter5{
            display: table-cell;
            vertical-align: middle;
            text-align: center;
        }
        .myDiv .box2{
            width:20px;
            height: 20px;
            background: red;
            display: inline-block;
        }

    </style>
</head>
<body>
    <div  class="myDiv divToCenter5">
        <div class="box2"></div>
    </div>

</body>
</html>

转载于:https://www.cnblogs.com/xingguozhiming/p/8847632.html

weixin_30718391
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
CSS实现水平垂直居中的几种方式
milk_tiger的博客
10-13 3783
1.最简单 margin: 0 auto line-height等于height .outer { width: 200px; padding: 200px; background-color: pink; } .inner { width: 100px; height: 100px; background-color: skyblu
css实现水平垂直居中的方法
weixin_48931100的博客
08-18 230
css实现水平垂直居中的方法
CSS水平垂直居中的几种方法
weixin_30550271的博客
12-17 487
直接进入主题！ 一、脱离文档流元素的居中 方法一：margin:auto法 CSS代码： div{ width: 300px; height: 300px; position: relative; border: 1px solid #465468; } img{ position: absolute; margin: a...
CSS垂直水平居中的几种方法
曲小强
08-19 833
作为一个前端小猴子，不管是面试的时候还是工作中，我们都会或多或少的遇到“使用css居中”的效果，今天就写一篇关于css垂直水平居中的几种方法。 栗子1：从最简单的水平居中开始 margin: 0 auto; 块级元素使用margin: 0 auto;可以在父元素的中间位置居中，不过要记得设置块级元素的宽高。 HTML部分 <div class="wrap"> <div c...
关于css垂直水平居中的几种方式
demosoftwa的博客
03-11 347
关于css垂直水平居中的几种方式 css中元素的垂直水平居中是比较常见及较常使用的，在这里向大家介绍一下几种方式。 1.水平居中 margin: 0 auto; 效果图： 而文字的垂直水平居中也比较简单，加上line-height: 200px;与text-align: center;即可。 #test{ width: 200px; height: 200px; line-height: 200px; background: red; margin: 0 auto; text-align: center
css几种常见的水平垂直居中的方法！！！
梧桐落叶~~
11-03 2911
常见的水平垂直居中方法 1.先给父级元素设置水平居中 text-align:center 在给当前垂直的元素转换成行内块元素和垂直居中 display:inline-block; vertical-align:middle 在元素的后面不要回车，加上同级元素span，进行设置此参照物的高度等于父级元素100% display:inline-block; verti...
CSS水平垂直居中的几种方法总结
09-24
以下就是CSS实现水平垂直居中的几种常见方法： 1. 利用margin:auto实现居中 这是一种常见的居中方式，通常用于块级元素。通过设置元素的position属性为relative，并把left和top属性设为0，再将margin设为auto，...
CSS 实现垂直居中的几种方法(必看)
12-13
最近在学关系型数据库相关，MySQL 和 Postgre,捎带着学了 PHP，为了练手这几天就忙着自己搭博客，项目...但是良辰今天想聊的是 CSS 垂直居中的方法，下面是萌萌的分割线。神马？你敢说不萌？ •方式一 ：table 布局方法
CSS实现垂直居中的几种方法
09-25
本文将介绍几种有效的CSS垂直居中方法，以便开发者可以根据具体场景选择适合的方法。 1. 表格单元格方式 这种方法通过将容器设置为表格样式，然后将子元素设置为表格单元格并应用`vertical-align: middle`来实现...
css 垂直居中的几种实现方法
12-13
今天重新整理一下思路，说说前端在实现页面元素垂直居中的几种思路： 一、利用 position 和负边距 利用绝对定位，让元素的顶部与居中线对齐，再让元素上移 50% 的高度。这个应该不难理解。原理可以用下图来做一个...
CSS实现水平垂直居中的6种方式
热门推荐
weixin_44370837的博客
05-11 3万+
大家好，我是小梅，公众号：「小梅的前端之路」 原创作者。 作为在前端领域不断探索的一员，在此记录开发中遇到的问题，如果你也遇到了相同的问题，希望本文对你有帮助。 在开发中经常需要实现的一个页面效果是：元素的垂直居中。 在此记录一下，经常适用的几种方法 前提：元素之前的布局关系如下，需要实现class为son该元素的垂直居中 <style> .son { width: 200px; height: 200px; background-color: p
CSS实现水平垂直居中的五种方法
Ned的CSDN博客
12-22 6114
前言 今天来看看一个之前困扰我很久的问题，在CSS中，水平垂直居中，能有几种写法。 方法一：margin:auto 子绝父相，当元素绝对定位的时候，会根据最近父元素进行定位，利用这个特性，我们有了这种方法。 CSS代码： div{ width: 600px; height: 600px; position: relative; border: 1px solid #000000; } img{ position: absolute; margin: auto
CSS实现元素水平垂直居中的各种方法
Kotlin0139的博客
07-16 1万+
在设计网页页面的过程中，总会有将元素或者文字进行水平或者垂直居中的要求，各种CSS样式调整，搞的头都大了。这里将会介绍CSS中几种常用到的水平垂直居中的方法，希望能够对你有所帮助。...
css水平垂直居中四种常用方式
CSDdas的博客
05-10 3893
css水平垂直居中四种常用方式
16种CSS水平垂直居中方法
weixin_45709829的博客
03-22 3万+
16种css水平垂直居中方法以及应用（文字、图片） 一、垂直居中 1、行内元素 基本思想：单行文本子元素line-height 值为父元素 height 值 .parent { height: 200px; } .son { line-height: 200px; } 2、块级元素 2.1行内块级元素 基本思想：元素是行内块级，使用display: inline-block, vertical-align: middle+伪元素处于容器中央 兼容性：支持IE7 .parent::afte
CSS中实现元素水平居中、垂直居中的6个方法（详解）
最新发布
xtcbql的博客
09-30 3万+
CSS中实现元素居中6个的方法、text-align、margin：auto、line-height、flex布局、position
css实现垂直水平居中的六种方法
weixin_67720880的博客
04-20 5812
该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。允许指定负长度值和百分比值。这会使元素降低而不是升高。在表单元格中，这个属性会设置单元格框中的单元格内容的对齐方式。vertical-align 属性设置一个元素的垂直对齐方式。
CSS实现水平垂直居中效果的全面探索
以上就是几种常见的CSS水平垂直居中方法，开发者可以根据实际需求和浏览器兼容性选择合适的技术。随着CSS3的普及，Flexbox和Grid布局正成为实现居中效果的首选方案，它们提供了更强大、更简洁的解决方案。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值