首页 建站教程 WEB前端 正文

元素垂直居中

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

在写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>


打赏
海报

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

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

相关推荐

Js简单实现复制指定内容到粘贴板

Js简单实现复制指定内容到粘贴板

通过以下代码,点击按钮可直接把input或者textarea里的值复制到粘贴板里,此方法不依赖jquery框架,实现简单粗暴希望对大家有所帮助。<!DOCTYPE html>...
WEB前端 2021.04.14 0 108
Js实现双击鼠标自动滚动页面效果

Js实现双击鼠标自动滚动页面效果

主要介绍了Js实现双击鼠标自动滚动页面的示例代码,在特定的页面也许可以用的的上例如小说或一些资讯类型的网站,需要的朋友可以试一试。操作比较简单把以下代码加在网站的页面中,就可以实现双击鼠标实现自动滚屏...
WEB前端 2021.03.15 0 242
如何通过css3给自己网站logo添加闪光效果

如何通过css3给自己网站logo添加闪光效果

通过css3给自己网站logo添加闪光效果,感觉效果还不错,可以提升用户对网站或企业的品牌印象。具体实现方法如下:找到自己网站logo外面层的盒子(元素),并给该元素添加以下css代码/*首先我们需...
WEB前端 2021.01.14 3 622
发布评论

ainiaobaibaibaibaobaobeishangbishibizuichiguachijingchongjingdahaqiandaliandangaodw_dogedw_erhadw_miaodw_tuzidw_xiongmaodw_zhutouganbeigeiliguiguolaiguzhanghahahahashoushihaixiuhanheixianhenghorse2huaixiaohuatonghuaxinhufenjiayoujiyankeaikeliankouzhaokukuloukunkuxiaolandelinileimuliwulxhainiolxhlikelxhqiuguanzhulxhtouxiaolxhwahahalxhzanningwennonuokpinganqianqiaoqinqinquantouruoshayanshengbingshiwangshuaishuijiaosikaostar0star2star3taikaixintanshoutianpingtouxiaotuwabiweifengweiquweiwuweixiaowenhaowoshouwuxiangjixianhuaxiaoerbuyuxiaokuxiaoxinxinxinxinsuixixixuyeyinxianyinyueyouhenghengyuebingyueliangyunzanzhajizhongguozanzhoumazhuakuangzuohenghengzuoyi
感谢您的支持