Advertisement
VanoHa

вравнивание по центру css

Dec 25th, 2022
1,654
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 1.08 KB | None | 0 0
  1. .parent1{
  2.   width: 300px;
  3.   height: 300px;
  4.   background: black;
  5. }
  6.  
  7. .chield1{
  8.   background: orange;
  9.   width: 100px;
  10.   height: 100px;
  11.  
  12. }
  13.  
  14. /*metod 1*/
  15.  
  16. .p1{
  17.   position: relative;
  18. }
  19.  
  20. .c1 {
  21.   position: absolute;
  22.   /*top: 50%;*/
  23.   left: 50%;
  24.   transform: translate(-50%, 0);
  25. }
  26.  
  27. /*metod 2*/
  28.  
  29. .p2 {
  30.   position: relative;
  31. }
  32.  
  33. .c2 {
  34.   position: absolute;
  35.   top: 0;
  36.   bottom: 0;
  37.   left: 0;
  38.   right: 0;
  39.   margin: auto;
  40. }
  41.  
  42. .p3 {
  43.   position: relative;
  44. }
  45.  
  46. .c3 {
  47.   position: absolute;
  48.   inset: 0;
  49.   margin: auto;
  50. }
  51.  
  52. .p4 {
  53.   display: flex;
  54.   justify-content: center;
  55.   /*align-items: center;*/
  56. }
  57.  
  58. .c4 {
  59.   align-self: center;
  60. }
  61.  
  62. .p5 {
  63.   display: flex;
  64. }
  65.  
  66. .c5 {
  67.   margin: auto;
  68. }
  69.  
  70. .p6 {
  71.   display: grid;
  72.   justify-content: center;
  73.   align-items: center;
  74. }
  75.  
  76. .c6 {
  77. }
  78.  
  79. .p7 {
  80.   display: grid;
  81.   place-items: center;
  82. }
  83.  
  84. .c7 {
  85. }
  86.  
  87. .p8 {
  88.   display: grid;
  89. }
  90.  
  91. .c8 {
  92.   align-self: center;
  93.   justify-self: center;
  94. }
  95.  
  96. .p9 {
  97.   display: grid;
  98. }
  99.  
  100. .c9 {
  101.   place-self: center;
  102. }
  103.  
  104. .p10 {
  105.   display: grid;
  106. }
  107.  
  108. .c10 {
  109.   margin: auto;
  110. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement