css定位“十字架“之水平垂直居中

最新推荐文章于 2023-10-10 16:43:47 发布

zhiqiang21

最新推荐文章于 2023-10-10 16:43:47 发布

阅读量6.6k

点赞数 2

CC 4.0 BY-SA版权

分类专栏： HTML+CSS 文章标签：水平居中竖直居中 div居中

本文链接：https://blog.youkuaiyun.com/yisuowushinian/article/details/45828563

本文介绍了如何使用CSS实现div的水平垂直居中，通过创建一个父级div并设置绝对定位，结合内部div布局，成功展示十字架居中效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.先看要实现的效果

这里写图片描述

实际的效果图

这里写图片描述

可以看到我的实现过程是先使用一个父级的div来定位水平垂直居中，然后再父级的div中定位出两个十字架的div。

看实现代码：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title></title>
    <style>
        body{
    
    margin:0;padding:

最低0.47元/天解锁文章

200万优质内容无限畅学

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

zhiqiang21

关注关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

CSS定位“十字架”之水平垂直居中

12-13

本文为大家分享了CSS定位“十字架“之水平垂直居中效果的实现方法，具体内容如下 1.先看要实现的效果实际的效果图可以看到我的实现过程是先使用一个父级的div来定位水平垂直居中，然后再父级的div中定位出两个十字架的div。看实现代码： XML/HTML Code复制内容到剪贴板 <html> <head> <title></title> <style> body{margin:0;padding:0} /*定位父级div水平垂直居中*/

纯CSS制作水平垂直居中“十字架”

weixin_33997389的博客

04-08

363

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>纯CSS制作水平垂直居中“十字架”</title> <style> body,d

1 条评论您还未登录，请先登录后发表或查看评论

使用重构的方式制作出一个水平、垂直都居中短边为50px，长边为150px的红色十字架，要求使用两个div

06-02

首先，我们创建一个div元素，它的类名为cross-container，并为它设置宽度150px、高度50px，并使用绝对定位、transform属性使它水平、垂直居中。接下来，我们在cross-container元素内部创建另一个div元素，它的类名...

使用重构的方式制作一个垂直都居中短边为50px长边为150px的红色十字架

06-02

可以使用flex布局和伪元素来实现这个需求，具体代码如下： ... ``` <div class="cross"></div> ``` CSS代码： ...首先，将容器 div 的宽度...这样就完成了一个垂直居中、短边为 50px、长边为 150px 的红色十字架的制作。

用css实现十字的布局示例代码

09-25

主要介绍了如何使用css来实现十字的布局,需要的朋友可以参考下

用css来实现十字的布局

weixin_30588675的博客

06-06

446

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><m...

css模拟上传十字架

sunnyboysix的博客

06-17

297

<div class="uploadImg"><div class="addPlus"></div></div> .uploadImg { width: 100px; height: 100px; background: #FFFFFF; border: 1px solid #DDE2EC; border-radius: 2px; position: relative; .addPlus { .

css3绘制十字架,纯css画十字架 8.21

weixin_28957683的博客

08-03

1359

好久没玩这个了，继续。绘制一个如图红色十字架，方块长150px，宽50px：要求：使用2个div完成使用3个div完成使用5个div完成两个div:html:css:.a,.b {position: absolute;left: 50%;top: 50%;background: red;}.a {width: 150px;height: 50px;}.b {width: 50px;height: ...

css画十字架和靶心图标

最新发布

程序媛的博客

10-10

776

css画十字架和靶心

html制作十字架,使用重构的方式制作出一个红色十字架

weixin_35307279的博客

06-10

1413

使用重构的方式制作出一个如下图的水平、垂直都居中短边为50px，长边为150px的红色十字架使用2个div完成#heng,#shu{left:50%;top:50%;position:absolute;background-color:#f00;}#shu{width:50px;height:150px;margin-left:-25px;margin-top:-75px;}#heng{width...

html图片十字形,在CSS中创建十字形

weixin_39973416的博客

06-04

756

您可以使用只有伪元素的方式来实现：#cross {width: 100px;height: 100px;position: relative;}#cross:before,#cross:after {content: "";position: absolute;z-index: -1;background: #d00;}#cross:before {left: 50%;width: 30%;mar...

HTML+CSS大风车及十字架的实现

记录编程生活

08-31

5517

说起大风车勾起了多少人的回忆，我们今天就利用CSS做一个大风车并且让它转起来。首先还是老规矩——先上效果图：一................ 不是说好了转起来的吗？怎么在哪

CSS元素居中多种方法

weixin_57844432的博客

10-24

5198

CSS元素居中多种方法。

练习：红色十字架

weixin_42077503的博客

03-09

1205

使用重构的方式制作出一个如下图的水平、垂直都居中短边为50px，长边为150px的红色十字架。 十字架 要求： 1.使用2个div完成 2.使用3个div完成 3.使用5个div完成答案： 1个div： <!DOCTYPE html> <html lang="en"> <head> <...

两个div实现十字架

monkindey的专栏

03-15

5461

先不用说什么，直接上效果图好像是医院的标志似的。那这个是怎么做出来的呢？我先讲讲我的思路吧！首先只用了两个div的话，我们只能把这个十字架分成两部分，那是哪两部分呢？一个是横的，一个是竖的。先说横的div要具备的属性，首先高度为50px 、宽度为150px 、背景颜色为红色而对于竖的呢，高度为150px 、宽度为50px 、背景颜色为红色。那我们就先来做个雏形吧

css3绘制十字架,纯CSS3实现绘制各种图形实现代码详细整理

weixin_31985599的博客

08-03

557

请在现代浏览器(IE9+、firefox、chrome、safari、opera等浏览器)中查看效果：复制代码代码如下:#circle {width: 100px;height: 100px;background: red;-moz-border-radius: 50px;-webkit-border-radius: 50px;border-radius: 50px;}复制代码代码如下:#oval...