首页 建站教程 WEB前端 正文

元素垂直居中

在写css样式时,水平居中比较简单,这里主要介绍垂直居中的方法,代码如下:<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style&g...

在写css样式时,水平居中比较简单,这里主要介绍垂直居中的方法,代码如下:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .wrap{
            width: 400px;
            height: 400px;
            margin: 0 auto;
            background: rgba(0,0,0,0.5);
            color: #fff;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .main{
            width: 400px;
            height: 400px;
            margin: 20px auto;
            position: relative;
            background: rgba(0,0,0,0.5);
            color: #fff;
        }
        .main p{
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
        }
    </style>
</head>
<body>
    <div>
        <p>对对对对对对对对对对对对对对对<br>猜猜猜猜猜错错错错错错错错错错错<br>试试事实上是是是<br>猜猜猜猜猜错错错错错错错错错错错<br>试试事实上是是是<br>猜猜猜猜猜错错错错错错错错错错错<br>试试事实上是是是</p>
    </div>
    <div>
        <p>对对对对对对对对对对对对对对对<br>猜猜猜猜猜错错错错错错错错错错错<br>试试事实上是是是<br>猜猜猜猜猜错错错错错错错错错错错<br>试试事实上是是是<br>猜猜猜猜猜错错错错错错错错错错错<br>试试事实上是是是</p>
    </div>
</body>
</html>


打赏
海报

本文由优美主题原创或收集发布

转载请注明本文地址:https://www.umtheme.com/web/31.html

相关推荐

纯css实现菜单或列表循环向上滚动效果

纯css实现菜单或列表循环向上滚动效果

在前端开发过程中,有时候针对某个模块需要无限循环的滚动一些消息或菜单,我们常用的方法基本上都是通过js来实现,虽然代码相对来说可能会精简一些,但是对于JS不是很熟悉的同学来说还是不太好理解,毕竟相对于...
WEB前端 2022.08.17 0 614
纯CSS实现侧边栏浮动在线客服效果

纯CSS实现侧边栏浮动在线客服效果

很多人一般在网页的侧边会选择放一个悬浮的在线客服,方便意向客户的联系,网上随便一搜也会有很多代码提供,但是大多都是JS书写的,并且夹带着...
WEB前端 2022.08.17 0 218
如何通过纯css实现常用的单选开关样式

如何通过纯css实现常用的单选开关样式

一般原生的单选,多选控件都不是很好看,不利于视觉发挥,所以很多情况下都需要通过写自定义控件样式才能更好的去还原视觉设计效果,本文就是介绍通过纯css实现6种常用的单选开关样式,样式都是自己根据项目需求...
WEB前端 2022.08.16 0 340
发布评论

ainiaobaibaibaibaobaobeishangbishibizuichiguachijingchongjingdahaqiandaliandangaodw_dogedw_erhadw_miaodw_tuzidw_xiongmaodw_zhutouganbeigeiliguiguolaiguzhanghahahahashoushihaixiuhanheixianhenghorse2huaixiaohuatonghuaxinhufenjiayoujiyankeaikeliankouzhaokukuloukunkuxiaolandelinileimuliwulxhainiolxhlikelxhqiuguanzhulxhtouxiaolxhwahahalxhzanningwennonuokpinganqianqiaoqinqinquantouruoshayanshengbingshiwangshuaishuijiaosikaostar0star2star3taikaixintanshoutianpingtouxiaotuwabiweifengweiquweiwuweixiaowenhaowoshouwuxiangjixianhuaxiaoerbuyuxiaokuxiaoxinxinxinxinsuixixixuyeyinxianyinyueyouhenghengyuebingyueliangyunzanzhajizhongguozanzhoumazhuakuangzuohenghengzuoyi
感谢您的支持