html中div内容居中的方法使用弹性盒子居中

简介: html中div内容居中的方法使用弹性盒子居中
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div {
            background-color: red;
            width: 300px;
            height: 300px;
 
            /*此元素会作为一个表格单元格显示
            (类似 <td> 和 <th>)*/
            display: table-cell;
            /*垂直居中 */
            vertical-align: middle;
            /*水平居中*/
            text-align: center;
        }
    </style>
</head>
 
<body>
<div>
    <!--<span>垂直居中</span>-->
    <img src="../share_icon_sina_weibo.png" width="150" height="100"/>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div {
            background-color: red;
            width: 300px;
            height: 300px;
 
            display: flex; /**/
            justify-content: center; /*水平居中*/
            align-items: Center; /*垂直居中*/
        }
    </style>
</head>
 
<body>
<div>
    <img src="../share_icon_sina_weibo.png" width="150" height="100"/>
    <!--<span>垂直居中</span>-->
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div {
            background-color: red;
            width: 300px;
            height: 300px;
 
            position: relative;
        }
 
        img {
            position: absolute;
            width: 150px;
            height: 100px;
            /*img左上角移动到html的中心*/
            top: 50%;
            left: 50%;
            /*img左上角向左上角分别移动自身的一半距离*/
            margin-left: -75px;
            margin-top: -50px;
            /*text-align: center;*/
        }
    </style>
</head>
<body>
<div>
    <img src="../share_icon_sina_weibo.png"/>
    <!--<span>垂直居中</span>-->
</div>
</body>
</html>
相关文章
|
10天前
|
JavaScript 前端开发
【快捷键配置】常用HTML类名、CSS样式名称、JS方法变量名、vue代码片段
【快捷键配置】常用HTML类名、CSS样式名称、JS方法变量名、vue代码片段
|
10天前
|
存储 移动开发 JavaScript
HTML5中form表单防止重复提交的两种方法
HTML5中form表单防止重复提交的两种方法
HTML输出特殊字符详细方法
以下是部分特殊字符代码表,它们的完整应用代码格式为:`&#××××;`用下面的四位数字替换×,将得到对应的符号。(注意:应用这些代码,编辑器应该切换到HTML模式)
|
10天前
|
小程序
微信小程序中识别HTML标签的方法
微信小程序中识别HTML标签的方法
|
10天前
|
存储 JSON 小程序
html在线预览CAD(手机小程序浏览DWG)二次开发图层表的方法
本文档介绍了DWG数据库中图层的存储结构及MxCAD库对图层的操作。图层信息存储于图层层表McDbLayerTable()中,每个记录对应一个图层,包含颜色、线型等属性,且有一个不可删除的默认"0"层。主要操作包括:通过MxCpp.getCurrentMxCAD()获取图层表,使用addLayer()添加图层,遍历图层,以及删除图层。此外,还展示了如何修改图层的关闭、冻结、锁定状态及颜色。提供了在线示例以演示这些功能。
html在线预览CAD(手机小程序浏览DWG)二次开发图层表的方法
|
10天前
|
移动开发 开发者 HTML5
html声明方法
【4月更文挑战第18天】html声明方法
29 1
|
10天前
|
JavaScript 前端开发
JavaScript DOM 操作:如何选中一个 HTML 元素?有哪些方法?
在JavaScript中,有五种主要方法选取HTML元素:1) `getElementById` 通过id选取单个元素;2) `getElementsByClassName` 选取具有特定类名的所有元素;3) `getElementsByTagName` 选取特定标签的所有元素;4) `querySelector` 使用CSS选择器选取单个元素;5) `querySelectorAll` 选取匹配CSS选择器的所有元素。这些方法结合使用可精确地定位到DOM树中的目标元素。
29 1
|
10天前
|
小程序 安全 Android开发
微信小程序中识别HTML标签的方法
微信小程序中识别HTML标签的方法
40 1
|
2天前
|
前端开发 JavaScript
HTML DOM如何通过JavaScript动态改变元素的CSS样式?
【5月更文挑战第23天】HTML DOM如何通过JavaScript动态改变元素的CSS样式?
4 1
|
10天前
|
移动开发 HTML5
HTML5/CSS3粒子效果进度条代码
HTML5/CSS3进度条应用。这款进度条插件在播放进度过程中出现粒子效果,就像一些小颗粒从进度条上散落下来
23 0
HTML5/CSS3粒子效果进度条代码