移动端常见问题----解决水平居中和垂直居中问题

最新推荐文章于 2022-04-16 01:31:35 发布

LiM .YOon A

最新推荐文章于 2022-04-16 01:31:35 发布

阅读量291

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/qq_45716607/article/details/114855327

版权

本文介绍了两种在移动端实现元素水平居中和垂直居中的方法。首选方法是利用灵活的Flex布局，而另一种方法则依赖于CSS属性的精细调整。这两种方法都针对了现代浏览器的支持。

摘要由CSDN通过智能技术生成

1 方法一使用万能的flex布局写法

（优先选择的方法）

**
**
前提条件就是浏览器必须支持flex布局

<!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>水平居中和垂直居中</title>
    <style type="text/css">
    *{
   
        box-sizing:border-box;
        margin: 0;
        padding:0;
    }

    .modal-wrapper {
   
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left:

最低0.47元/天解锁文章

LiM .YOon A

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
移动端常见问题----解决水平居中和垂直居中问题

**1 方法一使用万能的flex布局写法**前提条件就是浏览器必须支持flex布局<!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-widt
复制链接

扫一扫