Центр Div в Div на сафари ⇐ CSS

[Anonymous]

мой друг проверил мой веб-сайт oxitania.eu на своем Mac Safari, и он прислал мне скриншот, который в моем . Я использую Firefox, я тестировал на сайте браузерлинг, в версии Safari, и я также вижу эту ошибку CSS:
на Firefox и Chr -r -chry my shis! на Firefox] [2]] [2] < /p>

Код: Выделить всё

*,
*:before,
*:after {
margin: 0;
padding: 0;
border: 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
*:before,
*:after {
content: "";
}
div {
position: relative;
display: block;
}
article {
display: flex;
width: 100%;
max-width: 1440px;
margin: 0 auto 150px;
padding: 0 80px;
-moz-box-pack: center;
-webkit-box-pack: center;
justify-content: center;
-moz-box-align: center;
-webkit-box-align: center;
align-items: center;
}
.grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: 1fr;
grid-column-gap: 80px;
grid-row-gap: 16px;
width: 100%;
}
.left {
grid-area: 1 / 1 / 2 / 2;
justify-self: start;
}
.right {
grid-area: 1 / 2 / 2 / 3;
justify-self: end;
}
.list-txt {
width: 100%;
max-width: 550px;
text-align: left;
align-self: center;
z-index: 1;
}

.tags {
display: block;
margin: 0 auto 10px;
z-index: 0;
}
.num {
position: absolute;
left: -100px;
bottom: -40px;
color: #f1eee9;
font-size: 200px;
line-height: 150px;
font-weight: 700;
opacity: 0.7;
pointer-events: none;
z-index: 1;
}
.tagline {
display: inline-block;
width: 72px;
height: 2px;
margin-right: 24px;
vertical-align: middle;
background-color: #e1aa58;
z-index: 2;
}
.frame-circle {
display: inline-block;
vertical-align: middle;
aspect-ratio: 1/1;
padding: 0 20px;
border: 1px solid #e1aa58;
border-radius: 50%;
}
.tags .frame-circle {
background: #e1aa58;
}
.taglinks {
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.tags a {
display: block;
color: #fff;
font-size: 11px;
text-transform: uppercase;
}
.tags a:hover {
color: #fbd784;
}
.date {
position: relative;
display: block;
margin-bottom: 20px;
color: #ccc;
font-size: 12px;
text-transform: uppercase;
}
.list-txt p {
margin-bottom: 30px;
}
.more {
position: relative;
display: inline-block;
left: calc(100% - 202px);
right: 0;
color: #e1aa58;
font-size: 11px;
text-transform: uppercase;
}
.more:hover {
color: #fbd784;
}
.more div {
display: inline-block;
vertical-align: middle;
}
.more-txt {
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.more .tagline {
margin-left: 24px;
margin-right: 0;
}< /code>
[url=#]Saint Aubin de Nabirat[/url]
[url=#]Dordogne[/url]
[url=#]Périgord Noir[/url]
[url=#]Accommodation[/url]
[url=#]Restaurants - Cafés[/url]



...title...
...date...
...text...
[url=#]

Read more


[/url]

Вы можете найти мою скрипку здесь: https://jsfiddle.net/igorlaszlo/o6spxuq1/ . Div .taglinks позиционируется относительно, отображается блок и выровнен в абсолютном центре с верхней частью: 50%, слева: 50%и трансформирован с транслятом (-50%, -50%). < /p>
Во втором. -50%).
До сих пор это осталось, топ -50%и перевод -50%работал всегда, но это правда, что я не тестировал сафари с тех пор, как я давно не могу устанавливать новые версии в Windows.>

Подробнее здесь: https://stackoverflow.com/questions/796 ... -on-safari